Поиск по сайту:

Как использовать @next/font для оптимизации шрифтов в Next.js


Шрифты замедляют работу вашего сайта? Оптимизируйте время загрузки шрифтов вашего приложения с помощью этого пакета.

Возможно, вы захотите использовать собственные шрифты, чтобы сделать ваше приложение Next.js более привлекательным. Использование пользовательских шрифтов может значительно улучшить внешний вид вашего веб-сайта, но также может замедлить его производительность, если его не оптимизировать должным образом. Пакет @next/font решает эту проблему.

Пакет @next/font предоставляет простой и эффективный способ оптимизации загрузки шрифтов в Next.js, улучшая время загрузки страницы и повышая общую производительность. В этой статье представлена информация о том, как использовать @next/font в проекте Next.js.

Установка пакета

Вы можете установить пакет @next/font, выполнив в терминале следующую команду:

npm install @next/font

Если вы используете пряжу, вы можете установить пакет, выполнив следующую команду:

yarn add @next/font

Использование @next/font для оптимизации шрифтов Google

Пакет @next/font оптимизирует использование шрифтов Google. @next/font автоматически размещает шрифты Google на сервере Next.js, поэтому в Google не отправляется запрос на получение шрифтов.

Чтобы использовать шрифт Google в своем приложении, вы импортируете шрифт как функцию из @next/font/google в файл _app.js на страницах. каталог:

import { Roboto } from '@next/font/google'
const roboto = Roboto({ subsets: ['latin'] })
export default function MyApp({ Component, pageProps }) {
  return (
    <Component {...pageProps} />
  )
}

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

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

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

Вы указываете несколько толщин и стилей шрифтов, используя массивы.

Например:

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

Затем вы обернете свои компоненты в тег main и передадите шрифт как класс в тег main:

import { Roboto } from '@next/font/google'
const roboto = Roboto( 
  {
    subsets: ['latin'],
    weight: ['400', '500', '600'],
    style: ['italic', 'normal']
  }
)
export default function MyApp({ Component, pageProps }) {
  return (
 <main className={roboto.className}>
 <Component {...pageProps} />
 </main>
  )
}

При рендеринге приложения с помощью приведенного выше блока кода шрифт будет применен ко всему приложению. Альтернативно вы можете применить шрифт к одной странице. Для этого вы добавляете шрифт на конкретную страницу.

Вот так:

import { Roboto } from '@next/font/google'
const roboto = Roboto( 
  {
    subsets: ['latin'],
    weight: ['400', '500', '600'],
    style: ['italic', 'normal']
  }
)
export default function Home() {
  return (
    <div className={roboto.className}>
      <p>Hello There!!!</p>
    </div>
  )
}

Использование @next/font для оптимизации локальных шрифтов

Пакет @next/font также оптимизирует использование локальных шрифтов. Методика оптимизации локальных шрифтов с помощью пакета @next/font очень похожа на оптимизацию шрифтов Google с небольшими отличиями.

Чтобы оптимизировать локальные шрифты, используйте функцию localFont, предоставляемую пакетом @next/font. Вы импортируете функцию localFont из @next/font/local, а затем определяете переменный шрифт перед его использованием в приложении Next.js.

Вот так:

import localFont from '@next/font/local'
const myFont = localFont({ src: './my-font.woff2' })
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={myFont.className}>
 <Component {...pageProps} />
 </main>
  )
}

Переменный шрифт myFont определяется с помощью функции localFont. Функция localFont принимает объект в качестве аргумента. У объекта есть единственное свойство src, которому присвоен путь к файлу шрифта в формате WOFF2 "./my-font.woff2" .

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

Например:

const myFont = 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',
      },
    ]
  }
)

Использование @next/font с CSS Tailwind

Чтобы использовать пакет @next/font с Tailwind CSS, вам необходимо использовать переменные CSS. Для этого вы определите свой шрифт, используя Google или локальные шрифты, а затем загрузите свой шрифт с опцией переменной, чтобы указать имя переменной CSS.

Например:

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

В приведенном выше блоке кода вы создали шрифт inter и установили переменную в значение --font-inter. Затем className основного элемента присваивается переменная шрифта и font-sans. Класс inter.variable применит к странице шрифт inter, а класс font-sans применит шрифт без засечек по умолчанию.

Затем вы добавляете переменную CSS в файл конфигурации попутного ветра tailwind.config.cjs:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html",
  "./src/**/*.{js,ts,jsx,tsx}",],
  theme: {
    extend: {
 fontFamily: {
        sans: ['var(--font-inter)'],
      },
 },
  },
  plugins: [],
}

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

Оптимизация шрифтов с помощью @next/font

Пакет @next/font — это простой и эффективный способ оптимизировать загрузку шрифтов в Next.js. Этот пакет гарантирует эффективную загрузку ваших пользовательских шрифтов, улучшая производительность вашего веб-сайта и удобство использования. В этой статье представлена информация о том, как настроить пакет @next/font и использовать его в приложении Next.js. Вы можете еще больше улучшить производительность своего сайта, оптимизировав изображения.

Статьи по данной тематике: