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

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

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

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

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

Шрифты Google

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

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

import { Inter } from 'next/font/google'
 
// If loading a variable font, you don't need to specify the font weight
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

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

import { Roboto } from 'next/font/google'
 
const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
  display: 'swap',
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  )
}

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

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

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

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

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

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

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 } from './fonts'
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.className}>
      <body>
        <div>{children}</div>
      </body>
    </html>
  )
}

import { roboto_mono } from './fonts'
 
export default function Page() {
  return (
    <>
      <h1 className={roboto_mono.className}>My page</h1>
    </>
  )
}

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

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

import { Inter, Roboto_Mono } from 'next/font/google'
import styles from './global.css'
 
const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap',
})
 
const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  variable: '--font-roboto-mono',
  display: 'swap',
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>
        <h1>My App</h1>
        <div>{children}</div>
      </body>
    </html>
  )
}

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

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

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

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

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

import localFont from 'next/font/local'
 
// Font files can be colocated inside of `app`
const myFont = localFont({
  src: './my-font.woff2',
  display: 'swap',
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  )
}

Если вы хотите использовать несколько файлов для одного семейства шрифтов, 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-документ.

import { Inter, Roboto_Mono } from 'next/font/google'
 
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
})
 
const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-roboto-mono',
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>{children}</body>
    </html>
  )
}

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

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

Предварительная загрузка

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

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

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

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

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

© 2024 Vercel, Inc.
Licensed under the MIT License.
https://nextjs.org/docs/app/building-your-application/optimizing/fonts