Оптимизация шрифтов

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

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

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

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

Шрифты Google

Автоматическая самозагрузка любых шрифтов Google. Шрифты включаются в развёртывание и обслуживаются с того же домена, что и ваше приложение. Браузер не отправляет запросы к Google.

Начните с импорта нужного шрифта из next/font/google как функции. Рекомендуем использовать вариативные шрифты для лучшей производительности и гибкости.

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

pages/_app.js

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>
  )
}

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

pages/_app.js

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>
  )
}

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

app/layout.js

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

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

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

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

pages/_app.js

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} />
    </>
  )
}

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

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

pages/index.js

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, будет выдано предупреждение.

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

pages/_app.js

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

Подробнее см. в справочнике API шрифтов.

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

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

Первый подход — создать служебную функцию, которая экспортирует шрифт, импортирует его и применяет 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-решением:

app/global.css

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

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

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

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

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

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

pages/_app.js

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 из next/font/google (вы можете использовать любой шрифт Google или локальный). Загрузите ваш шрифт с опцией variable, чтобы определить имя CSS-переменной, и присвойте его inter. Затем используйте inter.variable, чтобы добавить CSS-переменную в ваш HTML-документ.

pages/_app.js

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

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

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

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

tailwind.config.js

/** @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 для применения шрифтов к элементам.

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

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

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

Повторное использование шрифтов

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

Вызовите функцию загрузки шрифта в одном общем файле
Экспортируйте её как константу
Импортируйте константу в каждый файл, где вы хотите использовать этот шрифт

On this page