Импорт шрифта Poppins в Next.js 13: подробное руководство

В этой статье мы рассмотрим несколько способов импорта шрифта Poppins в проект Next.js 13. Poppins — популярный шрифт, который имеет чистый и современный вид, что делает его отличным выбором для веб-дизайна. Мы рассмотрим различные подходы: от использования CDN до локального размещения шрифта.

Метод 1: импорт Poppins через CDN
Один простой способ импортировать шрифт Poppins в проект Next.js 13 — использовать сеть доставки контента (CDN). Вот как это можно сделать:

Шаг 1. Откройте проект Next.js и перейдите к файлу pages/_app.js.
Шаг 2. Добавьте следующий код в раздел headвашего head. s>8файл:

import Head from 'next/head';
function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <link
          href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
          rel="stylesheet"
        />
      </Head>
      <Component {...pageProps} />
    </>
  );
}
export default MyApp;

Метод 2: загрузка Poppins и локальное размещение
Если вы предпочитаете размещать файлы шрифтов локально, вы можете загрузить шрифт Poppins из надежного источника, например Google Fonts, и добавить его в свой проект Next.js.

Шаг 1. Посетите веб-сайт Google Fonts ( https://fonts.google.com/ ) и найдите «Poppins».
Шаг 2. Выберите желаемую толщину и стили шрифта и нажмите кнопку «Загрузить». чтобы получить ZIP-файл, содержащий файлы шрифтов.
Шаг 3. Извлеките загруженный ZIP-файл и найдите файлы шрифтов (обычно в формате TTF или OTF).
Шаг 4. Создайте новый каталог с именем «fonts». в «public» папке вашего проекта Next.js.
Шаг 5. Скопируйте файлы шрифтов в каталог «public/fonts».
Шаг 6. Откройте проект Next.js и перейдите к pages/_app.js.
Шаг 7. Добавьте следующий код в раздел headвашего файла _app.js:

import Head from 'next/head';
function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <link
          href="/fonts/poppins.css"
          rel="stylesheet"
        />
      </Head>
      <Component {...pageProps} />
    </>
  );
}
export default MyApp;

Шаг 8. Создайте новый файл с именем «poppins.css» в каталоге «public/fonts» и добавьте в него следующий код:

@font-face {
  font-family: 'Poppins';
  src: url('./poppins-regular.ttf') format('truetype');
  /* Add additional font weights and styles if necessary */
}

Метод 3: использование стороннего пакета.
Если вы предпочитаете более автоматизированный подход, вы можете использовать сторонние пакеты, такие как next-google-fonts, для импорта шрифта Poppins в ваш Next.js 13. проект. Вот как:

Шаг 1. Установите пакет next-google-fonts, выполнив следующую команду в корневом каталоге вашего проекта:

npm install next-google-fonts

Шаг 2. Откройте проект Next.js и перейдите к файлу pages/_app.js.
Шаг 3. Добавьте следующий код в раздел headвашего head. s>16файл:

import Head from 'next/head';
import { GoogleFonts } from 'next-google-fonts';
function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <GoogleFonts href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" />
      </Head>
      <Component {...pageProps} />
    </>
  );
}
export default MyApp;

В этой статье мы рассмотрели несколько способов импорта шрифта Poppins в проект Next.js 13. Независимо от того, предпочитаете ли вы использовать CDN, локально размещать файлы шрифтов или использовать сторонний пакет, теперь у вас есть несколько вариантов беспрепятственной интеграции шрифта Poppins. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует требованиям вашего проекта.

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