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

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

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

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

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

Шрифты Google

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

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

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

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'] })
 
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 шрифтов для получения дополнительной информации.

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

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

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

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

import localFont from 'next/font/local'
 
// Font files can be colocated inside of `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-документ.

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:

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

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

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

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

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

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

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

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