Как добавить веб-шрифты на сайт Next.js

Как добавить веб-шрифты на сайт Next.js

Веб-шрифты — отличный способ добавить пользовательские шрифты на ваш сайт. Эти шрифты могут быть недоступны в системе пользователя, поэтому вам необходимо включить их в свой проект, разместив их или сославшись на них через CDN.





Узнайте, как включить веб-шрифты на веб-сайт Next.js, используя эти два метода.



СДЕЛАТЬ ВИДЕО ДНЯ

Использование собственных шрифтов в Next.js

Чтобы добавить автономные шрифты в Next.js, вам необходимо используйте правило CSS @font-face . Это правило позволяет добавлять пользовательские шрифты на веб-страницу.





как получить интернет на ноутбуке где угодно

Прежде чем использовать font-face, вы должны загрузить шрифты, которые хотите использовать. Есть много сайты в Интернете, которые предлагают бесплатные шрифты , включая шрифты Google, пространство шрифтов и веб-сайты dafont.

Как только вы загрузите веб-шрифты, преобразуйте их в разные форматы шрифтов для поддержки нескольких браузеров. Вы можете использовать бесплатные онлайн-инструменты для преобразования шрифтов сделать это. Современные веб-браузеры поддерживают форматы .woff и .woff2. Если вам нужна поддержка устаревших браузеров, вы также должны предоставить форматы .eot и .ttf.



Создайте новую папку с именем шрифты в каталоге вашего сайта и сохраните преобразованные файлы шрифтов там.

Следующим шагом является включение начертаний шрифта в стили/global.css файл, чтобы сделать их доступными для всего веб-сайта. В этом примере начертания шрифта для шрифта русалки выделены жирным шрифтом:



@font-face { 
    font-family: 'Mermaid'; 
    src: url('Mermaid-Bold.eot'); 
    src: url('Mermaid-Bold.eot?#iefix') format('embedded-opentype'), 
        url('Mermaid-Bold.woff2') format('woff2'), 
        url('Mermaid-Bold.woff') format('woff'), 
        url('Mermaid-Bold.ttf') format('truetype'); 
    font-weight: bold; 
    font-style: normal; 
    font-display: swap; 
}

После включения файлов шрифтов вы можете использовать эти шрифты в файле CSS на уровне компонентов:

h1 { 
    font-family: Mermaid; 
}

Включение веб-шрифтов в Next.js через CDN

Некоторые веб-сайты предоставляют веб-шрифты через CDN, которые вы можете импортировать в свое приложение. Этот подход легко настроить, потому что вам не нужно загружать шрифты или создавать шрифты. Кроме того, если вы используете шрифты Google или TypeKit, Next.js автоматически выполняет оптимизацию.



Вы можете добавить шрифты из CDN, используя тег ссылки или правило @import внутри файла CSS.

как узнать, заблокировали ли вы в инстаграмме

Тег ссылки всегда находится внутри тега заголовка HTML-документа. Чтобы добавить тег заголовка в Next.js, необходимо создать собственный документ. Этот документ изменяет теги head и body, используемые для отображения каждой страницы.

Начните использовать эту функцию пользовательского документа, создав файл /страницы/_document.js.

Затем включите ссылку на шрифт в заголовок файла _document.js.

import Document, { Html, Head, Main, NextScript } from "next/document"; 
class MyDocument extends Document { 
  static async getInitialProps(ctx) { 
    const initialProps = await Document.getInitialProps(ctx); 
    return { ...initialProps }; 
  } 
  render() { 
    return ( 
      <Html> 
        <Head> 
          <link 
            href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap" 
            rel="stylesheet" 
          /> 
        </Head> 
        <body> 
          <Main /> 
          <NextScript /> 
        </body> 
      </Html> 
    ); 
  } 
} 
export default MyDocument;

Как использовать правило @import для включения шрифтов в проект Next.js

Другой вариант — использовать правило @import в файле CSS, в котором вы хотите использовать шрифт.

Например, сделайте шрифт доступным для всего проекта, импортировав веб-шрифт в стили/global.css файл.

Ф013Д49АК7Ф90Ф7435Д6ЭК4ЭА700878Д728Б15Б5

Теперь вы можете ссылаться на семейство шрифтов в Селектор CSS как это:

h1 { 
    font-family:'Libre Caslon Display', serif; 
}

Правило @import позволяет импортировать шрифт в содержащийся файл CSS. Использование тега ссылки делает шрифт доступным для всего сайта.

ты можешь прочитать мне сказку на ночь

Должны ли вы размещать шрифты локально или импортировать их через CDN?

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

Если вы хотите использовать импортированные шрифты, предварительно загрузите их, чтобы повысить производительность сайта. Если шрифты доступны в Google Fonts или Typekit, вы можете импортировать их и воспользоваться функциями оптимизации Next.js.