Объединение шрифтов в ваше веб-приложение

Как Fontsource предоставляет шрифты для поставки с вашим приложением

Автономные шрифты

Если вы хотите объединить шрифты, используемые в вашем веб-приложении, Fontsource — это библиотека, на которую вы, возможно, захотите взглянуть (ссылка также в приложении в конце страницы). Это позволяет вам устанавливать шрифты, которые вы хотите использовать, а это означает, что ваши шрифты размещаются вами и не требуют загрузки CDN.

Установка каждого шрифта

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

npm install @fontsource/work-sans

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

import "@fontsource/work-sans/400.css";
import "@fontsource/work-sans/900-italic.css";

Наконец, мне нужно установить семейство шрифтов в моем CSS. В зависимости от используемой вами библиотеки (например, Tailwind.css) этот код может выглядеть для вас немного иначе.

body {
  font-family: "Work Sans", sans-serif;
}

Переменные шрифты

Fontsource также предоставляет возможность установки вариативных шрифтов, что означает, что у вас есть доступ к новейшим инструментам, когда дело доходит до загрузки шрифтов. Обратите внимание, что не все шрифты доступны в виде вариативных вариантов.