nextjs tailwind googlefonts selfhost starter
1.0.0
Типография может сделать ваши приложения Zing !!!
Добавление шрифтов Google позволяет использовать пользовательские шрифты в ваших приложениях. Они рекламируются как бесплатные, и на выбор более 900 семей шрифтов. С 2018 года Google рекомендовал самостоятельное управление как способ добавить свои шрифты.
Существует количество веб -безопасных шрифтов, которые являются бесплатными и встроенными в различные платформы. Тем не менее, иногда нам нужно что -то более индивидуальное, чтобы служить целям нашего дизайна.
Итак, "без особого дальнейшего" ...
Этот repo специально предназначен для самостоятельного управления шрифтами Google, а не использует ссылку на их CDN, и как интегрировать их в приложение Next.js, которое использует CSS Taillid.
Существует количество плюсов и минусов для самостоятельного ведения, которые обсуждались во многих статьях и блогах, я не буду подробно описать их здесь. Я предоставил несколько ссылок в конце этого файла Readme, для дальнейшего чтения.
Google шрифты рекламируются как открытый исходный код и бесплатный для использования ...
Но не верьте мне на слово (я не пропагандисый, и это не юридическая консультация)
Все шрифты, используемые в этом примере, поступают из Google Fonts по лицензии SIL Open Font (OFL) v1.1. Я позаботился о том, чтобы включить лицензии в папки для самостоятельного управления в репо, что запрашивается в OFL.
Примечание: вы всегда должны читать информацию о лицензии на шрифт, так как вы отвечаете за ее следование. В настоящее время Google Fonts Использование OFL V1.1, некоторые используют лицензию Apache 2. Шрифты Ubuntu используют лицензию Ubuntu Font v1.0
Вы должны обратиться за юридической консультацией перед самостоятельным хостком или использованием каких-либо пользовательских шрифтов.
Смотрите демонстрацию кода здесь
Вы можете получить шрифты Google несколькими способами (это не истощающий список), используя следующие инструменты:
Шрифты также можно найти в Googles Github Repo.
Однажды вы загрузили их, вы можете добавить их в свой проект в самостоятельный.
Самый простой способ принять их - это public папка, в под папке с fonts .
Я структурировал местоположения ресурсов шрифта следующим образом, вам не нужно следовать этому, это демонстрирует гибкость и что все шрифты могут быть организованы, а не просто размещены под папку
fonts.
├── public
| └── fonts
| └── google
│ ├── font(s) by name
│ │ │ ├── .woff / .ttf (etc)
│ │ │ ├── .css
│ │ │ ├── licence.txt
├── styles
| └── global.css (app-base.css)
├── .gitignore
├── jsconfig.json
├── postcss.config.js
├── tailwind.config.js
Шрифты будут Serverd от этого места до нашего приложения Next.js.
Как только мы загрузили файлы шрифтов, лицензии, таблицы стилей и т. Д. И структурировали папки, нам нужно выполнить загрузку шрифтов.
Мы можем использовать @font-face для загрузки шрифтов. См. Файлы CSS, размещенные рядом с ресурсами шрифта в папке font выше.
Мы можем в конечном итоге импортировать их в файл CSS -стилей Tailild. Обычно это называется global.css , я использую 3 файла, которые импортируются в файл следующего.js _app.js.
Например:
@font-face {
font-family : 'Oswald Variable' ; /*Ive added a prefix to let me know its a variable font*/
font-style : normal;
font-weight : 200 700 ;
src : local ( 'Oswald' ) ,
url (/fonts/google/oswald/Oswald-VariableFont_wght.ttf) format ( 'truetype' );
font-display : swap;
} Затем мы выполняем некоторые небольшие оптимизации для загрузки шрифтов с использованием атрибута font-display .
Используя @font-face в сочетании с атрибутами font-display мы можем предотвратить FOUT и FOIT.
Есть ряд стратегий, доступных для реализации этого:
| Стратегия | Описание |
|---|---|
1. block | Не приносит ничего пользователя, пока не загрузится шрифты. |
2. swap | Рекомендуется для шрифтов Google. Он обменяется, как только шрифт загрузится. |
3. fallback | не рекомендуется. В течение короткого времени он все еще показывает невидимый текст, как блок, но в конечном итоге будет отступать в безопасный шрифт. |
4. optional | Хороший выбор, когда шрифт не важен, больше внимания уделяется бренду и контенту. Это как медленный подключенный запасной, который может даже не загрузить шрифт. |
Это новое правило, которое вы можете добавить к своему декларации Font-Face, которое говорит браузеру использовать в перечисленных вами защитных системах запасной системы (например, без засечка), а затем поменять желаемый шрифт, когда он был загружен.
Это хорошее улучшение производительности, поскольку он отображает контент, не ожидая, когда загрузки завершатся.
font-display: swap; имеет недостаток вспыхивания этого неизменного текста, если шрифт еще не загрузился. Но мы можем исправить это с помощью предварительной нагрузки.
Мы можем предварительно загрузить наши шрифты в приложении <head> нашего страницы. Это особенно полезно для тех критических кусочков типографии, которые мы хотим отобразить без мигания.
Тодо это, мы можем добавить <preload> в голову нашей страницы (ы).
В next.js мы добавляем его в пользовательский _document.js следующим образом:
< Head >
< link
rel =" preload "
href =" /fonts/google/grandstander/Grandstander-VariableFont_wght.ttf "
as =" font "
type =" font/ttf "
crossOrigin =" anonymous "
/>
</ Head > Примечание. Будьте осторожны при использовании предварительной нагрузки, так как она может иметь негативный эффект, если он используется. Итак, мы используем это с умом. Это способ установить важность ресурса, мы также можем сделать то же самое для наших ресурсов script , если это будет необходимо.
Затем мы создаем файл Fonts.css в папке publicfonts . Здесь мы импортируем различные файлы CCS для ресурсов шрифта Google, загруженных с использованием @font-face выше, т.е.
@import './google/oswald/Oswald-Variable.css' ;Затем это импортируется в файл стиля Tailwind ниже.
Затем мы добавляем следующее в файл app-base.css в папке ./styles .
Мы используем директиву @layer , чтобы рассказать о том, какое «ведро» мы также добавляем стили шрифта.
Действительные директивы уровня являются базой, компонентами и утилитами.
Например:
@layer base {
@import "../public/fonts/fonts.css";
}
Затем мы импортируем стили в файл _app.js :
import '@/styles/app-base.css';
import '@/styles/app-components.css';
import '@/styles/app-utilities.css';
Наконец, мы настроили файл tailwind.config.js , чтобы добавить семьи шрифтов в наше приложение. Мы либо добавляем их в базовые темы шрифта, либо расширяем темы (или оба).
Например:
const { fontFamily } = require('tailwindcss/defaultTheme');
module.exports = {
fontFamily: {
sans: ['Oswald Variable, Arial', fontFamily.serif],
serif: ['Merriweather Sans, Georgia', fontFamily.serif],
},
extend: {
fontFamily: {
'Grandstander-VariableFont': ['Grandstander Variable'],
},
},
},
;
Вот и все. Мы закончили, см. Код более подробно.
Спасибо за чтение. ? ?
Пожалуйста, снимайте меня в голову, если вы нашли это полезным.
Здесь следует больше информации для тех, кто может найти это полезным. ?
Помните, что вы можете использовать Lighthouse для проверки производительности вашей страницы, это также будет искать оптимации шрифтов и сценариев и включать рекомендации, включая проблемы FOUT и FOIT.
После того, как я построен, я рад сказать, что эта демонстрация получает следующее при запуске локально.
Основные причины, по которым я выбираю самостоятельно, заключаются в следующем:
| 1. Google рекомендует это | Теперь его рекомендуется самим Google. С 2018 года Google рекомендовал самостоятельно хостинг, для оптимальной реформирования посредством предварительной загрузки. Самоунижение бесплатно и поощряется, см. Это видео: разработчики Google Chrome: веб-производительность сделана простыми. |
| 2. Лучше для конфиденциальности | Сторонние CDN могут использовать файлы cookie и алгоритмы отслеживания, о которых вы не обязательно не знаете. Это может быть проблемой в странах, где вам нужно согласие пользователя (т.е. конфиденциальность данных и GDPR, см.: GDPR-соответствие шрифтов Google. |
| 3. Лучше для безопасности | больше управления на вашем собственном сервере). Вы на самом деле вызовите как минимум 2 домена при использовании CDN. |
| 4. быстрее и более реформант | Google шрифты добавляют ресурсы, которые вам могут не понадобиться. Вы можете выбрать стили шрифтов и т. Д. И объединить и минимизировать свои собственные правила/файлы CSS, связанные с шрифтом, предоставляя меньше HTTP-запросов. Вы можете сделать это, обслуживая конкретные шрифты и одноизоды, которые вам нужны для типографии ваших сайтов. Определенные части шрифтов, а не целых семей. Вы можете выбрать стили шрифтов и т. Д. И объединить и минимизировать свои собственные правила/файлы CSS, связанные с шрифтом, предоставляя меньше HTTP-запросов. |
| 5. Офлайн доступность | Для мобильных и настольных приложений, которые доступны в автономном режиме. |
Попробуйте это сами.
Я бы посоветовал вам проверить с вашим конкретным сайтом/приложением и использовать инструменты Dev в сочетании с «отключением кэша» и встроенной способностью изменять скорость соединения.
Я не освещал использование npm packages для добавления шрифтов. Есть несколько ароматов, доступных онлайн, если это ваше предпочтение.
Некоторые альтернативы-попытаться использовать Fontsource или следующие фонды .
