Веб-шрифты — отличный способ добавить пользовательские шрифты на ваш сайт. Эти шрифты могут быть недоступны в системе пользователя, поэтому вам необходимо включить их в свой проект, разместив их или сославшись на них через CDN.
Узнайте, как включить веб-шрифты на веб-сайт Next.js, используя эти два метода.
Использование собственных шрифтов в Next.js
Чтобы добавить автономные шрифты в Next.js, вам необходимо используйте правило CSS @font-face. Это правило позволяет добавлять пользовательские шрифты на веб-страницу.
Прежде чем использовать font-face, вы должны загрузить шрифты, которые хотите использовать. Есть много сайты в Интернете, которые предлагают бесплатные шрифты, включая шрифты Google, пространство шрифтов и веб-сайты dafont.
Как только вы загрузите веб-шрифты, преобразуйте их в разные форматы шрифтов для поддержки нескольких браузеров. Вы можете использовать бесплатные онлайн-инструменты для преобразования шрифтов сделать это. Современные веб-браузеры поддерживают форматы .woff и .woff2. Если вам нужна поддержка устаревших браузеров, вы также должны предоставить форматы .eot и .ttf.
Создайте новую папку с именем шрифты в каталоге вашего сайта и сохраните преобразованные файлы шрифтов там.
Следующим шагом является включение начертаний шрифта в стили/global.css файл, чтобы сделать их доступными для всего веб-сайта. В этом примере начертания шрифта для шрифта русалки выделены жирным шрифтом:
@шрифт-лицо {
семейство шрифтов: 'Русалка';
источник: URL('Русалка-Bold.eot');
источник: URL('Русалка-Bold.eot?#iefix') формат('встроенный открытый тип'),
URL('Русалка-Bold.woff2') формат('woff2'),
URL('Русалка-Bold.woff') формат('ничего себе'),
URL('Русалка-Bold.ttf') формат('истинный тип');
вес шрифта: полужирный;
стиль шрифта: обычный;
Отображение шрифта: поменять местами;
}
После включения файлов шрифтов вы можете использовать эти шрифты в файле CSS на уровне компонентов:
ч1 {
семейство шрифтов: Mermaid;
}Включение веб-шрифтов в Next.js через CDN
Некоторые веб-сайты предоставляют веб-шрифты через CDN, которые вы можете импортировать в свое приложение. Этот подход легко настроить, потому что вам не нужно загружать шрифты или создавать шрифты. Кроме того, если вы используете шрифты Google или TypeKit, Next.js автоматически выполняет оптимизацию.
Вы можете добавить шрифты из CDN, используя тег ссылки или правило @import внутри файла CSS.
Тег ссылки всегда находится внутри тега заголовка HTML-документа. Чтобы добавить тег заголовка в Next.js, необходимо создать собственный документ. Этот документ изменяет теги head и body, используемые для отображения каждой страницы.
Начните использовать эту функцию пользовательского документа, создав файл /pages/_document.js.
Затем включите ссылку на шрифт в заголовок файла _document.js.
Импортировать Документ, {Html, Head, Main, NextScript} от "следующий/документ";
сортМойДокументрасширяетДокумент{
статическийасинхронный getInitialProps (ctx) {
константа начальные свойства = Ждите Документ.getInitialProps(ctx);
возвращаться {...инициалпропс};
}
оказывать() {
возвращаться (
<HTML>
<Голова>
<связь
ссылка="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&дисплей=своп"
отн="таблица стилей"
/>
</Head>
<тело>
<Основной />
<СледующийСкрипт />
</body>
</Html>
);
}
}
экспортпо умолчанию МойДокумент;Как использовать правило @import для включения шрифтов в проект Next.js
Другой вариант — использовать правило @import в файле CSS, в котором вы хотите использовать шрифт.
Например, сделайте шрифт доступным для всего проекта, импортировав веб-шрифт в стили/global.css файл.
@импорт URL('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&дисплей=своп');
Теперь вы можете ссылаться на семейство шрифтов в Селектор CSS так:
ч1 {
семейство шрифтов:'Свободный дисплей Caslon', с засечками;
}Правило @import позволяет импортировать шрифт в содержащийся файл CSS. Использование тега ссылки делает шрифт доступным для всего сайта.
Должны ли вы размещать шрифты локально или импортировать их через CDN?
Шрифты, размещенные локально, обычно быстрее, чем шрифты, импортированные из CDN. Это связано с тем, что браузеру не нужно делать дополнительный запрос к CDN шрифтов после загрузки веб-страницы.
Если вы хотите использовать импортированные шрифты, предварительно загрузите их, чтобы повысить производительность сайта. Если шрифты доступны в Google Fonts или Typekit, вы можете импортировать их и воспользоваться функциями оптимизации Next.js.