Модуль Font

next/font автоматически оптимизирует ваши шрифты (включая пользовательские) и исключает внешние сетевые запросы для улучшения конфиденциальности и производительности.

Он включает встроенный автоматический самохостинг для любых файлов шрифтов. Это означает, что вы можете оптимально загружать веб-шрифты без сдвига макета.

Вы также можете удобно использовать все Google Fonts. CSS и файлы шрифтов загружаются во время сборки и размещаются самостоятельно вместе с остальными статическими ресурсами. Браузер не отправляет запросы к Google.

Чтобы использовать шрифт на всех страницах, добавьте его в файл _app.js в директории /pages, как показано ниже:

import { Inter } from 'next/font/google'

// Если загружается переменный шрифт, указывать вес не нужно
const inter = Inter({ subsets: ['latin'] })

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  )
}

🎥 Смотрите: Узнайте больше об использовании next/font → YouTube (6 минут).

Справочник

src

Путь к файлу шрифта в виде строки или массива объектов (типа Array<{path: string, weight?: string, style?: string}>) относительно директории, где вызывается функция загрузки шрифта.

Используется в next/font/local

• Обязателен

Примеры:

• src:'./fonts/my-font.woff2', где my-font.woff2 находится в директории fonts внутри директории app
• src:[{path: './inter/Inter-Thin.ttf', weight: '100',},{path: './inter/Inter-Regular.ttf',weight: '400',},{path: './inter/Inter-Bold-Italic.ttf', weight: '700',style: 'italic',},]
• если функция загрузки шрифта вызывается в app/page.tsx с src:'../styles/fonts/my-font.ttf', то my-font.ttf должен находиться в styles/fonts в корне проекта

weight

Вес шрифта с возможными значениями:

• Строка с возможными значениями весов для конкретного шрифта или диапазон значений, если это переменный шрифт
• Массив значений весов, если шрифт не является переменным шрифтом Google. Применяется только для next/font/google.

Используется в next/font/google и next/font/local

• Обязателен, если используемый шрифт не является переменным

Примеры:

• weight: '400': Строка для одного значения веса - для шрифта Inter возможные значения: '100', '200', '300', '400', '500', '600', '700', '800', '900' или 'variable', где 'variable' является значением по умолчанию)
• weight: '100 900': Строка для диапазона между 100 и 900 для переменного шрифта
• weight: ['100','400','900']: Массив из 3 возможных значений для не переменного шрифта

style

Стиль шрифта с возможными значениями:

• Строка со значением по умолчанию 'normal'
• Массив значений стилей, если шрифт не является переменным шрифтом Google. Применяется только для next/font/google.

Используется в next/font/google и next/font/local

• Необязателен

Примеры:

• style: 'italic': Строка - может быть normal или italic для next/font/google
• style: 'oblique': Строка - может принимать любое значение для next/font/local, но ожидается использование стандартных стилей шрифтов
• style: ['italic','normal']: Массив из 2 значений для next/font/google - значения из normal и italic

subsets

Подмножества шрифта, определяемые массивом строковых значений с именами каждого подмножества, которое вы хотите предварительно загрузить. Шрифты, указанные в subsets, получат тег предварительной загрузки в head, когда опция preload имеет значение true (по умолчанию).

Используется в next/font/google

• Необязателен

Примеры:

• subsets: ['latin']: Массив с подмножеством latin

Список всех подмножеств можно найти на странице Google Fonts для вашего шрифта.

axes

Некоторые переменные шрифты имеют дополнительные оси, которые можно включить. По умолчанию включен только вес шрифта для уменьшения размера файла. Возможные значения axes зависят от конкретного шрифта.

Используется в next/font/google

• Необязателен

Примеры:

• axes: ['slnt']: Массив со значением slnt для переменного шрифта Inter, который имеет slnt в качестве дополнительной оси, как показано здесь. Возможные значения axes для вашего шрифта можно найти, используя фильтр на странице переменных шрифтов Google и ища оси, отличные от wght

display

Отображение шрифта с возможными строковыми значениями: 'auto', 'block', 'swap', 'fallback' или 'optional' (по умолчанию 'swap').

Используется в next/font/google и next/font/local

• Необязателен

Примеры:

• display: 'optional': Строка со значением optional

preload

Логическое значение, определяющее, следует ли предварительно загружать шрифт. По умолчанию true.

Используется в next/font/google и next/font/local

• Необязателен

Примеры:

• preload: false

fallback

Резервный шрифт для использования, если основной шрифт не может быть загружен. Массив строк с резервными шрифтами без значения по умолчанию.

• Необязателен

Используется в next/font/google и next/font/local

Примеры:

• fallback: ['system-ui', 'arial']: Массив, устанавливающий резервные шрифты system-ui или arial

adjustFontFallback

• Для next/font/google: Логическое значение, определяющее, следует ли использовать автоматический резервный шрифт для уменьшения Cumulative Layout Shift. По умолчанию true.
• Для next/font/local: Строка или логическое значение false, определяющее, следует ли использовать автоматический резервный шрифт для уменьшения Cumulative Layout Shift. Возможные значения: 'Arial', 'Times New Roman' или false. По умолчанию 'Arial'.

Используется в next/font/google и next/font/local

• Необязателен

Примеры:

• adjustFontFallback: false: для next/font/google
• adjustFontFallback: 'Times New Roman': для next/font/local

variable

Строковое значение для определения имени CSS-переменной, если стиль применяется с методом CSS-переменных.

Используется в next/font/google и next/font/local

• Необязателен

Примеры:

• variable: '--my-font': Объявляется CSS-переменная --my-font

declarations

Массив пар ключ-значение дескрипторов для дальнейшего определения сгенерированного @font-face.

Используется в next/font/local

• Необязателен

Примеры:

• declarations: [{ prop: 'ascent-override', value: '90%' }]

Примеры

Google Fonts

Чтобы использовать шрифт Google, импортируйте его из next/font/google как функцию. Мы рекомендуем использовать переменные шрифты для лучшей производительности и гибкости.

Чтобы использовать шрифт на всех страницах, добавьте его в файл _app.js в директории /pages, как показано ниже:

import { Inter } from 'next/font/google'

// Если загружается переменный шрифт, указывать вес не нужно
const inter = Inter({ subsets: ['latin'] })

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  )
}

Если вы не можете использовать переменный шрифт, вам потребуется указать вес:

import { Roboto } from 'next/font/google'

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
})

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={roboto.className}>
      <Component {...pageProps} />
    </main>
  )
}

Вы можете указать несколько весов и/или стилей, используя массив:

const roboto = Roboto({
  weight: ['400', '700'],
  style: ['normal', 'italic'],
  subsets: ['latin'],
  display: 'swap',
})

Полезно знать: Используйте подчеркивание (_) для названий шрифтов, состоящих из нескольких слов. Например, Roboto Mono следует импортировать как Roboto_Mono.

Применение шрифта в <head>

Вы также можете использовать шрифт без обертки и className, вставив его внутрь <head> следующим образом:

import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <style jsx global>{`
        html {
          font-family: ${inter.style.fontFamily};
        }
      `}</style>
      <Component {...pageProps} />
    </>
  )
}

Использование на одной странице

Чтобы использовать шрифт на одной странице, добавьте его на конкретную страницу, как показано ниже:

import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <div className={inter.className}>
      <p>Hello World</p>
    </div>
  )
}

Указание подмножества

Шрифты Google автоматически подмножествуются. Это уменьшает размер файла шрифта и улучшает производительность. Вам нужно определить, какие подмножества вы хотите предварительно загрузить. Если не указать ни одного подмножества при значении preload true, будет выдано предупреждение.

Это можно сделать, добавив его в вызов функции:

const inter = Inter({ subsets: ['latin'] })

Дополнительную информацию смотрите в Справочнике по API Font.

Использование нескольких шрифтов

Вы можете импортировать и использовать несколько шрифтов в вашем приложении. Есть два подхода, которые можно применить.

Первый подход — создать вспомогательную функцию, которая экспортирует шрифт, импортирует его и применяет его className там, где это необходимо. Это гарантирует, что шрифт будет предзагружен только при его отображении:

import { Inter, Roboto_Mono } from 'next/font/google'

export const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
})

import { Inter, Roboto_Mono } from 'next/font/google'

export const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
})

В приведённом выше примере Inter будет применён глобально, а Roboto Mono можно импортировать и применять по мере необходимости.

Альтернативно, вы можете создать CSS-переменную и использовать её с вашим предпочтительным CSS-решением:

html {
  font-family: var(--font-inter);
}

h1 {
  font-family: var(--font-roboto-mono);
}

В приведённом выше примере Inter будет применён глобально, а все теги <h1> будут стилизованы с помощью Roboto Mono.

Рекомендация: Используйте несколько шрифтов умеренно, так как каждый новый шрифт — это дополнительный ресурс, который клиенту нужно загрузить.

Локальные шрифты

Импортируйте next/font/local и укажите src вашего локального файла шрифта. Мы рекомендуем использовать переменные шрифты (variable fonts) для лучшей производительности и гибкости.

import localFont from 'next/font/local'

// Файлы шрифтов могут находиться внутри `pages`
const myFont = localFont({ src: './my-font.woff2' })

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={myFont.className}>
      <Component {...pageProps} />
    </main>
  )
}

Если вы хотите использовать несколько файлов для одного семейства шрифтов, src может быть массивом:

const roboto = localFont({
  src: [
    {
      path: './Roboto-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: './Roboto-Italic.woff2',
      weight: '400',
      style: 'italic',
    },
    {
      path: './Roboto-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
    {
      path: './Roboto-BoldItalic.woff2',
      weight: '700',
      style: 'italic',
    },
  ],
})

См. Справочник по API шрифтов для получения дополнительной информации.

С Tailwind CSS

next/font легко интегрируется с Tailwind CSS с помощью CSS-переменных.

В приведённом ниже примере мы используем шрифты Inter и Roboto_Mono из next/font/google (вы можете использовать любой шрифт Google или локальный шрифт). Используйте опцию variable, чтобы определить имя CSS-переменной, например inter и roboto_mono для этих шрифтов соответственно. Затем примените inter.variable и roboto_mono.variable, чтобы включить CSS-переменные в ваш HTML-документ.

Полезно знать: Вы можете добавить эти переменные в тег <html> или <body> в зависимости от ваших предпочтений, стилевых потребностей или требований проекта.

import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
})

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-roboto-mono',
})

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={`${inter.variable} ${roboto_mono.variable} font-sans`}>
      <Component {...pageProps} />
    </main>
  )
}

Наконец, добавьте CSS-переменную в ваш конфиг Tailwind CSS:

Tailwind CSS v4

Начиная с Tailwind v4, конфигурация по умолчанию не требуется. Если вам всё же нужно настроить Tailwind, вы можете следовать официальной документации для настройки глобального CSS-файла.

@import "tailwindcss";

@theme inline {
  --font-sans: var(--font-inter);
  --font-mono: var(--font-roboto-mono);
}

Tailwind CSS v3

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)'],
        mono: ['var(--font-roboto-mono)'],
      },
    },
  },
  plugins: [],
}

Теперь вы можете использовать утилитарные классы font-sans и font-mono для применения шрифта к вашим элементам.

<p class="font-sans ...">The quick brown fox ...</p>
<p class="font-mono ...">The quick brown fox ...</p>

Применение стилей

Вы можете применить стили шрифта тремя способами:

• className
• style
• CSS-переменные

className

Возвращает только для чтения CSS className для загруженного шрифта, который можно передать в HTML-элемент.

<p className={inter.className}>Hello, Next.js!</p>

style

Возвращает только для чтения CSS style объект для загруженного шрифта, который можно передать в HTML-элемент, включая style.fontFamily для доступа к имени семейства шрифтов и резервным шрифтам.

<p style={inter.style}>Hello World</p>

CSS-переменные

Если вы хотите установить свои стили во внешней таблице стилей и указать там дополнительные параметры, используйте метод CSS-переменных.

Помимо импорта шрифта, также импортируйте CSS-файл, в котором определена CSS-переменная, и установите параметр variable объекта загрузчика шрифтов следующим образом:

import { Inter } from 'next/font/google'
import styles from '../styles/component.module.css'

const inter = Inter({
  variable: '--font-inter',
})

import { Inter } from 'next/font/google'
import styles from '../styles/component.module.css'

const inter = Inter({
  variable: '--font-inter',
})

Чтобы использовать шрифт, установите className родительского контейнера текста, который вы хотите стилизовать, в значение variable загрузчика шрифтов, а className текста — в свойство styles из внешнего CSS-файла.

<main className={inter.variable}>
  <p className={styles.text}>Hello World</p>
</main>

<main className={inter.variable}>
  <p className={styles.text}>Hello World</p>
</main>

Определите класс селектора text в CSS-файле component.module.css следующим образом:

.text {
  font-family: var(--font-inter);
  font-weight: 200;
  font-style: italic;
}

В приведённом выше примере текст Hello World стилизован с использованием шрифта Inter и сгенерированного резервного шрифта с font-weight: 200 и font-style: italic.

Использование файла определений шрифтов

Каждый раз, когда вы вызываете функцию localFont или шрифта Google, этот шрифт будет размещаться как один экземпляр в вашем приложении. Поэтому, если вам нужно использовать один и тот же шрифт в нескольких местах, вы должны загрузить его в одном месте и импортировать связанный объект шрифта там, где он вам нужен. Это делается с помощью файла определений шрифтов.

Например, создайте файл fonts.ts в папке styles в корне вашего каталога app.

Затем укажите ваши определения шрифтов следующим образом:

import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
import localFont from 'next/font/local'

// определите ваши переменные шрифты
const inter = Inter()
const lora = Lora()
// определите 2 начертания не переменного шрифта
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// определите пользовательский локальный шрифт, где GreatVibes-Regular.ttf хранится в папке styles
const greatVibes = localFont({ src: './GreatVibes-Regular.ttf' })

export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes }

import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
import localFont from 'next/font/local'

// определите ваши переменные шрифты
const inter = Inter()
const lora = Lora()
// определите 2 начертания не переменного шрифта
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// определите пользовательский локальный шрифт, где GreatVibes-Regular.ttf хранится в папке styles
const greatVibes = localFont({ src: './GreatVibes-Regular.ttf' })

export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes }

Теперь вы можете использовать эти определения в вашем коде следующим образом:

import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts'

export default function Page() {
  return (
    <div>
      <p className={inter.className}>Hello world using Inter font</p>
      <p style={lora.style}>Hello world using Lora font</p>
      <p className={sourceCodePro700.className}>
        Hello world using Source_Sans_3 font with weight 700
      </p>
      <p className={greatVibes.className}>My title in Great Vibes font</p>
    </div>
  )
}

import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts'

export default function Page() {
  return (
    <div>
      <p className={inter.className}>Hello world using Inter font</p>
      <p style={lora.style}>Hello world using Lora font</p>
      <p className={sourceCodePro700.className}>
        Hello world using Source_Sans_3 font with weight 700
      </p>
      <p className={greatVibes.className}>My title in Great Vibes font</p>
    </div>
  )
}

Чтобы упростить доступ к определениям шрифтов в вашем коде, вы можете определить псевдоним пути в ваших файлах tsconfig.json или jsconfig.json следующим образом:

{
  "compilerOptions": {
    "paths": {
      "@/fonts": ["./styles/fonts"]
    }
  }
}

Теперь вы можете импортировать любое определение шрифта следующим образом:

import { greatVibes, sourceCodePro400 } from '@/fonts'

import { greatVibes, sourceCodePro400 } from '@/fonts'

Предзагрузка

Когда функция шрифта вызывается на странице вашего сайта, она не доступна глобально и не предзагружается на всех маршрутах. Вместо этого шрифт предзагружается только на связанных маршрутах в зависимости от типа файла, в котором он используется:

• если это уникальная страница, он предзагружается на уникальном маршруте для этой страницы
• если он находится в custom App, он предзагружается на всех маршрутах сайта под /pages

Изменения версий