Как подключить woff шрифт в css

Как подключить шрифт в React

Рассмотрим три быстрых способах подключения шрифтов в React приложение.

font В HTML используется для указания начертания, размера шрифта, типографики текста. Вы можете добавить шрифты в свое React приложение разными способами.

Способ 1. С использованием link

Мы можем ссылаться на любые шрифты из Интернета, с помощью тега внутри HTML-файла. Рассмотрим пример применения Google Fonts шрифта с помощью тега .

1. Переходим в fonts.google.com
2. Кликаем на шрифт

1. Кликаем на “Select Regular 400” (или на любые другие выбранные виды, можно несколько)

1. Нажимаем на иконку “View selected families” сверху справа.

1. В появившемся боковом меню переходим в секцию “Use on the web” и копируем код, расположенный под

1. Переходим в index.html . Если ваше приложение создано с помощью create-react-app , то index.html находится в папке public . Вставляем код, скопированный в п.5 внутрь .

1. На сайте Google Fonts в том же боковом меню находим секцию “CSS rules to specify families” и копируем код.

1. Переходим в CSS файл и добавляем следующий стиль, вставляем скопированный код:

.font-roboto < font-family: 'Roboto', sans-serif; /* скопированный код */ >

Применяем этот стиль в любом React компоненте

// App.jsx import './App.css'; function App() < return ( 
Hello
 
 ); > export default App;
Способ 2. С использованием Web Font Loader

Установим webfontloader

yarn add webfontloader
npm i webfontloader

Импортируем webloader в компонент

import WebFont from 'webfontloader';

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

useEffect(() => < WebFont.load(< google: < families: ['Droid Sans', 'Chilanka'] >>); >, []);

Теперь вы можете использовать эти шрифты в компоненте React с помощью атрибута className или style . Чтобы использовать атрибут className , создайте CSS-класс в файле .css .

.font-loader
Затем, в методе render() компонента добавьте следующее.
 
Hello, World!
 
Или, с атрибутом style
>> Hello, World!
 
Способ 3. С использованием @font-face
Иногда шрифты должны быть загружены локально и упакованы в приложение. @font-face - это правило CSS для определения имени шрифта путем указания на него с помощью URL. 

Создадим папку fonts в каталоге src .
Загрузим необходимые шрифты. В этом примере мы загрузим шрифт Lobster . Для этого выберем шрифт в Google Fonts, нажмем “Download family” и распакуем архив.



Скопируем содержимое в папку src\fonts .



Затем импортируем шрифты в файл index.js .

import './fonts/Lobster/Lobster-Regular.ttf';

В файл index.css добавим

@font-face < font-family: "LobsterRegular"; src: local("LobsterRegular"), url("./fonts/Lobster/Lobster-Regular.ttf") format("truetype"); font-weight: normal; >

Теперь добавим имя класса в файл App.css , который использует этот шрифт.

.font-lobster

Применяем этот стиль в любом React компоненте

// App.jsx import './App.css'; function App() < return ( 
Hello
 
 ); > export default App;
Как понять React быстро?

9 месяцев назад · 6 мин. на чтение
Если вы хотите быстро понять React, то эта статья для вас. Эта статья познакомит вас с большинством концепций React, которые вы будете использовать ежедневно. Это сделает ваш старт в React разработке быстрым.
Как создать компонент?
React приложения состоят из компонентов. Компонент — это часть пользовательского интерфейса. Компонент содержит собственную логику и внешний вид. Компонент может быть маленьким, как кнопка, или большим, как целая страница. React компоненты — это JavaScript функции, которые возвращают разметку:
function MyButton() < return Это кнопка; >
Теперь, когда мы объявили компонент MyButton , мы можем вложить его в другой компонент:
export default function MyApp() < return ( 
Welcome to my app
 
 ); >
Обратите внимание, что начинается с заглавной буквы. Это соглашение, которое дает понять, что это React компонент. Имена React компонентов всегда должны начинаться с заглавной буквы, а теги HTML должны быть строчными. Ключевые слова export default определяют основной экспортируемый из файла компонент.
Как добавить разметку с JSX?
Особая разметки, которую вы видели выше, называется JSX. Не обязательно использовать JSX разметку, но большинство проектов React используют JSX для удобства. JSX строже, чем HTML. Вы должны закрыть теги типа 
. Ваш компонент также не может возвращать несколько тегов JSX. Вы должны обернуть их в общий родитель, например 
.
 или пустую оболочку - фрагмент - <>. :
function AboutPage() < return ( <>
About
 
Hello there. 
How do you do?
 ); >
Как добавить стили?
Для того чтобы указать CSS класс в React нужно использовать className . Он работает так же, как атрибут class в HTML:

Затем вы пишете правила CSS для него в отдельном файле CSS:
.avatar
Как отобразить данные в компоненте?
JSX позволяет размещать разметку внутри JavaScript функции. Фигурные скобки позволяют вам писать JavaScript внутри разметки, чтобы вы могли внедрить показать значение переменной из своего кода. Например, это фрагмент кода покажет имя пользователя, т.к. в поле user.name содержится строка с именем пользователя:
return ;
Вы также можете использовать JavaScript из JSX атрибутов. В этом случае нужно использовать фигурные скобки вместо кавычек. Например, className="avatar" передает строку "avatar" как CSS класс, но src= считывает значение JavaScript переменной user.imageUrl , а затем передает это значение как атрибут src :
return />;
В фигурные скобки в JSX можно поместить более сложные выражения, например, конкатенацию строк:
const user = < name: 'John', imageUrl: 'https://example.com/userpic.jpg', imageSize: 90, >; export default function Profile() < return ( <>  alt= style=> /> ); >
В приведенном выше примере style=> не является специальным синтаксисом, а является обычным объектом <> внутри фигурных скобок style= < >JSX. Вы можете использовать атрибут style , когда ваши стили зависят от переменных JavaScript.
Как отобразить элементы по условию?
В React нет специального синтаксиса для написания условий. Вместо этого можно использовать те же приемы, что и при написании обычного JavaScript кода. Например, вы можете использовать оператор if для условного включения JSX:
let content; if (isLoggedIn) < content = ; > else < content = ; > return ;
Если вы предпочитаете более компактный код, вы можете использовать условный ? оператор. В отличие от if , он работает внутри JSX:
Если вам не нужна ветвь else , вы также можете использовать более короткий синтаксис логического && :
Все эти подходы также работают для указанных по условию атрибутов. Если вы не знакомы с некоторыми элементами этого синтаксиса JavaScript, вы можете начать с постоянного использования if. else .
Как отобразить список?
Вы будете полагаться на возможности JavaScript, такие как цикл for и метод массива map() для отображения списков компонентов. Предположим, есть набор продуктов:
const products = [ < title: "Капуста", id: 1 >, < title: "Чеснок", id: 2 >, < title: "Яблоко", id: 3 >, ];
Как работать с событиями компонента?
Для того чтобы реагировать на события нужно внутри компонента объявить функцию-обработчик события.
function MyButton() < function handleClick() < alert('You clicked me!'); >return >Click me; >
Обратите внимание, что onClick= не имеет круглых скобок в конце. Это говорит о том, что это не вызов функции, а передача функции. React вызовет ваш обработчик событий, когда пользователь нажмет кнопку.
Как обновить данные компонентов?
Часто необходимо, чтобы компонент «запоминал» некоторую информацию и отображал ее. Например, мы хотим подсчитать, сколько раз была нажата кнопка. Для этого нужно добавить состояние к компоненту. Во-первых, импортируем useState из React: Теперь мы можем объявить переменную состояния внутри компонента:
function MyButton() < const [count, setCount] = useState(0);
useState возвращает две вещи: текущее состояние ( count ) и функцию, которая позволяет обновить это состояние ( setCount ). Можно дать им любые имена, но принято называть их по такому шаблону - [something, setSomething] . При первом отображении кнопки count будет равен 0 , потому что мы передали 0 в useState() . Для того чтобы изменить состояние, нужно вызвать setCount() и передайте ему новое значение. Нажатие на эту кнопку увеличит счетчик:
function MyButton() < const [count, setCount] = useState(0); function handleClick() < setCount(count + 1); >return >Clicked times; >
React снова вызовет функцию-компонент. На этот раз счет будет 1 . Затем будет 2 . И так далее. Если добавить один и тот же компонент несколько раз, каждый из них получит свое собственное состояние.
import < useState >from 'react'; export default function MyApp() < return ( 
Счетчики, которые обновляются независимо
  
 ); > function MyButton() < const [count, setCount] = useState(0); function handleClick() < setCount(count + 1); >return >Clicked times; >
Обратите внимание, как каждая кнопка «запоминает» свое собственное состояние счетчика и не влияет на другие кнопки.
Как использовать хуки?
Функции, начинающиеся с use , называются хуками. useState — это встроенный хук, предоставляемый React. Вы также можете написать свои собственные хуки, комбинируя существующие. Хуки накладывают больше ограничений, чем обычные функции. Хуки можно вызывать только на верхнем уровне компонентов (или других хуков). Если вы хотите использовать useState в условии или цикле, создайте новый компонент и поместите его туда.
Как передавать данные между компонентами?
В предыдущем примере у каждой MyButton был собственный независимый счетчик, и при нажатии каждой кнопки менялся только счетчик нажатой кнопки. Что если требуется обновлять эти счетчики вместе? Чтобы оба компонента MyButton отображали одно и то же число и обновлялись вместе, вам нужно переместить состояние от отдельных кнопок «вверх» к ближайшему родительскому компоненту, содержащему их все. Теперь, когда при нажатии любой кнопки-счетчика, счетчик в MyApp изменится, что изменит оба счетчика в MyButton . Вот как это можно выразить в коде.
Во-первых, переместим состояние из MyButton в MyApp :
export default function MyApp() < const [count, setCount] = useState(0); function handleClick() < setCount(count + 1); >return ( 
  
 ); > function MyButton() < // >
Затем передадим состояние из MyApp в каждый MyButton вместе с общим обработчиком кликов через пропсы. Передавать информацию в MyButton можно с помощью фигурных скобок JSX, точно так же, как мы делали это раньше со встроенными тегами, такими как :
export default function MyApp() < const [count, setCount] = useState(0); function handleClick() < setCount(count + 1); >return ( 
Счетчики, изменяющиеся вместе
 onClick= /> onClick= />
 ); >
Информация, которую передается таким образом, называется пропсами. Теперь компонент MyApp содержит состояние счетчика и обработчик события handleClick и передает их оба в качестве пропсов каждой из кнопок. Наконец, изменим MyButton , чтобы он считывал пропсы, которые мы ему передали из родительского компонента:
function MyButton(< count, onClick >) < return >Clicked times; >
Когда вы нажимаете кнопку, срабатывает обработчик onClick . В проп onClick каждой кнопки передается функция handleClick внутри MyApp . Этот код вызывает setCount(count + 1) , увеличивая переменную состояния count . Новое значение счетчика передается в качестве пропса каждой кнопке, поэтому все они показывают новое значение. Это называется «подъем состояния вверх». Переместив состояние вверх, мы сделали его общим для этих компонентов.
import < useState >from 'react'; export default function MyApp() < const [count, setCount] = useState(0); function handleClick() < setCount(count + 1); >return ( 
Счетчики, изменяющиеся вместе
 onClick= /> onClick= />
 ); > function MyButton(< count, onClick >) < return >Clicked times; >
Использование пользовательских шрифтов
Astro поддерживает все распространенные методы добавления пользовательских шрифтов в дизайн вашего сайта. Это руководство продемонстрирует вам два различных варианта подключения веб-шрифтов в ваш проект.
Использование локального файла шрифта
Если вы хотите добавить файлы шрифтов в свой проект, мы рекомендуем добавить их в каталог public/ . Затем в вашем CSS файле вы можете зарегистрировать шрифты с помощью правила @font-face и использовать свойство font-family для стилизации вашего сайта.
Пример
Представим, что у вас есть файл шрифта DistantGalaxy.woff .

Добавьте свой файл шрифта в каталог public/fonts/ .
Добавьте правило @font-face в ваш CSS. Это может быть глобальный .css файл, который вы импортируете, или блок в макете или компоненте, где вы хотите использовать этот шрифт.


/* Зарегистрируйте пользовательское семейство шрифтов и сообщите браузеру, где его найти. */
@font-face 
 
font-family: 'DistantGalaxy';
 
src: url('/fonts/DistantGalaxy.woff') format('woff');
 
font-weight: normal;
 
font-style: normal;
 
font-display: swap;
>
src/pages/example.astro
---
---
 
h1>In a galaxy far, far away. h1>
 
p>Custom fonts make my headings much cooler!p>
 
style>
h1 
 
font-family: 'DistantGalaxy', sans-serif;
>
style>
Использование Fontsource
Проект Fontsource упрощает использование Google шрифтов и других шрифтов с открытым исходным кодом. Он предоставляет устанавливаемые npm модули для шрифтов, которых вы хотите использовать.

Найдите шрифт, который вы хотите использовать в каталоге Fontsource. В этом примере мы будем использовать Twinkle Star.
Установите пакет выбранного шрифта.


npm pnpm Yarn

Terminal window
npm install @fontsource/twinkle-star
Terminal window
pnpm install @fontsource/twinkle-star
Terminal window
yarn add @fontsource/twinkle-star
src/layouts/BaseLayout.astro
---
import '@fontsource/twinkle-star';
---
h1 
 
font-family: "Twinkle Star", cursive;
>
Добавление шрифтов с Tailwind
Если вы используете интеграцию с Tailwind (EN), вы можете добавить правило @font-face для вашего локального шрифта или использовать метод import из Fontsource для добавления шрифта.

Следуйте любому из приведенных выше руководств, но пропустите заключительный шаг добавления свойства font-family в ваш CSS.
Добавьте название шрифта в файл tailwind.config.cjs . Этот пример добавляет InterVariable и Inter в стек шрифтов sans-serif, с использованием резервных шрифтов по умолчанию из Tailwind CSS.


tailwind.config.cjs
const defaultTheme = require("tailwindcss/defaultTheme");
 
module.exports = 
 
// . 
 
theme: 
 
extend: 
 
fontFamily: 
 
sans: ["InterVariable", "Inter", . defaultTheme.fontFamily.sans],
 
>,
 
>,
 
>,
 
// . 
>;
Подключение шрифтов в CSS
Чтобы использовать на сайте какой-либо нестандартный шрифт (которого может не оказаться на компьютере пользователя), его необходимо подключить. Как это сделать?
Коллекция Google Fonts
Проще всего использовать сервис Google Fonts. Там достаточно выбрать подходящий шрифт из богатой коллекции, кастомизировать его (подобрать нужные начертания и языки) и получить готовую ссылочку. Выглядеть она будет примерно так:
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&subset=cyrillic');
в зависимости от способа подключения (в HTML или в CSS).
В обоих случаях сама ссылка одна и та же, отличается лишь обертка. Она должна подключить на сайт шрифт семейства Open Sans стандартного, жирного и курсивного начертания с латинскими (по умолчанию) и кириллическими символами. Скопируем ее в адресную строку браузера и посмотрим, как это работает. (можно перейти по ссылке)

Мы видим много-много строк текста, разбитых на сегменты. Да, примерно так шрифты к веб-страницам и подключаются.
Самостоятельное подключение
Не все шрифты можно найти на Google Fonts, плюс иногда хочется, чтобы подгрузка ресурсов не зависела от стороннего сервиса, пусть даже такого надежного, как Google. Ну и в конце концов, верстальщик должен уметь подключать шрифты ��
Основная проблема при работе со шрифтами — это разнообразие форматов. Если вы скачаете любой шрифт с того же самого Google Fonts, вы получите плотненький архивчик, содержащий обычно целых три (а то и больше) разных файла для одного и того же начертания.

Не будем вдаваться в подробности, какой браузер какой формат желает видеть, это тема для отдельной статьи. Просто примем как факт то, что для нормальной работы нам нужен и .eot , и .woff и даже таинственный .ttf .
Каждое начертание нужно будет указать отдельным правилом. Если требуется подключить обычный, жирный, курсивный и жирный курсивный виды шрифта, придется написать четыре инструкции.
Настройки шрифта
Каждое правило будет выглядеть примерно так:
@font-face
С правилами font-weight и font-style все понятно, их нужно прописать для каждого начертания нужного шрифта. Font-family при этом остается неизменной. Именно указанное здесь имя будет использоваться во всех css-инструкциях для применения этого шрифта.
В моем случае css-файл начнется следующим образом:
@font-face < font-family: 'Open Sans'; font-weight: normal; font-style: normal; src: url(font1-url); >@font-face < font-family: 'Open Sans'; font-weight: normal; font-style: italic; src: url(font2-url); >@font-face < font-family: 'Open Sans'; font-weight: 700; font-style: normal; src: url(font3-url); >@font-face
Если указать правильные адреса файлов и установить для какого-нибудь элемента жирный курсивный шрифт Open Sans, браузер обратится к файлу *font4-url, так как именно он содержит нужное начертание.
Это самые базовые настройки, можно указать любые другие допустимые в CSS характеристики шрифтов, например, font-variant или font-stretch . Можно и вообще никаких настроек не указывать, ограничиться только названием и адресом файла.
Файлы шрифта
Теперь обратимся непосредственно к файлам.
В качестве значения свойства src необходимо указать все файлы, содержащие разные форматы шрифта, перечислив их имена через запятую. Браузер будет перебирать их по одному, пока не встретит подходящий. Чтобы ему не приходилось загружать каждый файл для ознакомления, рядом обычно указывают формат в качестве подсказки.
Для нашего любимого Internet Explorer организуем особое подключение.
@font-face < font-family: 'Open Sans'; font-weight: normal; font-style: normal; src: url(/fonts/OpenSans-Regular.eot); /* IE9 Compat Modes */ src: url(/fonts/OpenSans-Regular.eot#iefix) format('embedded-opentype'), url(/fonts/OpenSans-Regular.woff) format('woff'), url(/fonts/OpenSans-Regular.ttf) format('truetype'), url(/fonts/OpenSans-Regular.svg#OpenSans-Regular) format('svg'); >@font-face < font-family: 'Open Sans'; font-weight: 700; font-style: normal; src: url(/fonts/OpenSans-Bold.eot); /* IE9 Compat Modes */ src: url(/fonts/OpenSans-Bold.eot) format('embedded-opentype'), url(/fonts/OpenSans-Bold.woff) format('woff'), url(/fonts/OpenSans-Bold.ttf) format('truetype'), url(/fonts/OpenSans-Bold.svg#OpenSans-Bold) format('svg'); >
Локальное подключение
Есть еще одна отличная опция, позволяющая до начала загрузки проверить, есть ли нужный шрифт на компьютере пользователя. В этом случае даже грузить ничего не придется, что позволит оптимизировать работу сайта. Для этого используется функция local() , которая идет самой первой в списке шрифтов. Можно указывать сразу несколько проверок с разными вариантами названия.
@font-face < font-family: 'Open Sans'; font-weight: normal; font-style: normal; src: url(/fonts/OpenSans-Regular.eot); /* IE9 Compat Modes */ src: local('Open Sans Regular'), local('OpenSans-Regular'), url(/fonts/OpenSans-Regular.eot) format('embedded-opentype'), url(/fonts/OpenSans-Regular.woff) format('woff'), url(/fonts/OpenSans-Regular.ttf) format('truetype'), url(/fonts/OpenSans-Regular.svg#OpenSans-Regular) format('svg'); >
Не всегда все необходимые форматы и разновидности шрифта есть в наличии. В этом случае можно использовать только имеющиеся, а браузер при необходимости постарается дорисовать то что есть (например, для создания курсивного начертания) или использует запасной шрифт.
Нестандартные шрифты: как подключить и оптимизировать
Текст — основная часть контента на большинстве сайтов, и важно грамотно подходить к его отрисовке. В этой статье мы разберём базовые моменты, касающиеся подключения и оптимизации шрифтов.
Сразу стоит отметить, что самый простой вариант — вообще не подключать сторонние шрифты и пользоваться стандартными, которые предустановлены в большинстве операционных систем. Это хорошо знакомые Arial, Times New Roman и так далее — эти шрифты называются веб-безопасными, достаточно просто указать название одного из таких шрифтов в коде, и всё будет работать.
Но чаще всего дизайн макета не позволяет обойтись веб-безопасным шрифтом, а требует использовать какой-то нестандартный. В этом случае при загрузке страницы файл со шрифтом нужно подгружать с сервера по той же схеме, что и остальные ресурсы — CSS-файлы, изображения и так далее. Он может весить довольно много, именно поэтому для быстрой загрузки страницы выгоднее сначала рассмотреть возможность использования стандартных шрифтов. Но даже с нестандартными шрифтами можно избежать большинства проблем, если уделить внимание оптимизации.
Выбираем формат шрифта
Все слышали про TTF и OTF. Но это форматы, которые предоставляются с минимальным сжатием или совсем без него. Их стоит использовать только в том случае, если нужна поддержка очень старых браузеров.
Во всех остальных ситуациях можно выбрать WOFF и WOFF2 — форматы, которые отличаются высокой степенью сжатия. WOFF2 вообще можно считать лучшим из существующих. Тем не менее, поддержка WOFF2 хотя и очень хорошая, но пока не абсолютная, поэтому в качестве подстраховки для не самых современных браузеров стоит использовать WOFF .
Подключение шрифтов с помощью Google Fonts
Есть простой и удобный способ подключить нестандартный шрифт — использовать Google Fonts. Это бесплатный сервис, с помощью которого можно подключать шрифты, но не хранить их на своём сервере. Чтобы им воспользоваться, необходимо выбрать шрифт и добавить одно или несколько нужных начертаний, а затем вставить в ссылку, которую сгенерирует Google Fonts во вкладке Embed.

Этого достаточно, чтобы шрифт подключился. Теперь его можно использовать в свойстве font-family без каких-либо дополнительных действий.
body
Стоит отметить, что после основного шрифта важно указать веб-безопасный. В случае, если нестандартный шрифт не загрузится, браузер воспользуется альтернативным. Его нужно подобрать максимально похожим на основной шрифт.
Плюсы этого способа — простота использования и всегда актуальные версии шрифтов, Google Fonts их часто обновляет. Но у него есть и минус — запросы к сторонним серверам могут негативно повлиять на скорость загрузки страницы. Если выбираете этот способ, стоит обратить внимание на оптимизацию.
Подключение шрифтов с помощью правила @font-face
Есть альтернативный способ, при котором файлы со шрифтами хранятся вместе с остальными ресурсами сайта. Для них принято заводить отдельную директорию в корне проекта — например, fonts . В неё следует поместить файлы для каждого начертания в нужных форматах — в большинстве случаев, если не требуется поддержка старых браузеров, подойдут .woff и .woff2, о которых мы говорили ранее. Шрифты можно скачать на различных ресурсах. При этом всегда нужно обращать внимание на лицензию — некоторые шрифты могут быть недоступны для коммерческого использования.
После того, как шрифты добавлены в проект, их нужно подключить в CSS-файле. Для этого используется правило @font-face . В самом базовом варианте оно будет включать:

Название шрифта, которое затем нужно использовать, чтобы задать элементам подключённый шрифт.
Адрес файла со шрифтом, который нужно подключить, и его формат. Если адресов несколько, их можно указать через запятую. В этом случае важен порядок — браузер будет последовательно пытаться подключить файлы. Первым должен быть самый подходящий формат, а далее — запасные варианты. Также с помощью функции local можно добавить возможность перед загрузкой шрифта с сервера проверить, установлен ли он на компьютере пользователя. Если да, запроса к серверу за шрифтом не будет — при рендеринге используется локальная версия. Но у этого способа есть минус — шрифт на компьютере пользователя может быть устаревшим, и тогда страница отобразится не совсем так, как было задумано.
Начертания: жирное, курсивное и так далее. Для каждого начертания нужно отдельное правило @font-face .

Базовый вариант правила:
@font-face < font-family: "Roboto"; font-style: normal; font-weight: 400; /* Браузер сначала попробует найти шрифт локально */ src: local("Roboto"), /* Если не получилось, загрузит woff2 */ url("/fonts/roboto.woff2") format("woff2"), /* Если браузер не поддерживает woff2, загрузит woff */ url("/fonts/roboto.woff") format("woff"); >/* Теперь можно использовать шрифт */ body
Для улучшения производительности правило @font-face лучше всего прописывать в самом начале CSS-файла. Так браузер сможет раньше начать обработку шрифта.
Оптимизация
Выбор современного формата шрифта, который обладает хорошей степенью сжатия — это только первый шаг к оптимизации. Можно сделать гораздо больше, чтобы увеличить скорость загрузки страницы и сделать пользовательский опыт при взаимодействии с интерфейсом приятнее.
FOIT, FOUT и FOFT
Пока шрифт загружается, при рендеринге можно наблюдать разное поведение текста.
FOIT (Flash of Invisible Text) — с англ. «мелькание невидимого текста». При таком поведении, пока шрифт не загрузится, текст не отображается и появляется только после загрузки шрифта. Значительная проблема — во время загрузки нет доступа к текстовому контенту.
FOUT (Flash of Unstyled Text) — с англ. «мелькание неоформленного текста». Во время загрузки используется шрифт, заданный по умолчанию (системный, например), а после загрузки страница перерисовывается с использованием загрузившегося шрифта. Эта перерисовка довольно заметна и может быть нежелательна.
FOFT (Flash of Faux Text) — с англ. «мелькание синтезированного текста». Это поведение можно наблюдать в промежутке, когда основное начертание уже загрузилось, а дополнительные (жирное, курсивное и так далее) — нет. Браузер имитирует нужное начертание до загрузки настоящей версии. В этом случае страница может перерисовываться несколько раз по мере загрузки начертаний.
В разных браузерах логика рендеринга текста во время загрузки шрифта отличается. Например, Chrome и Firefox в течение трёх секунд не отрисовывают ничего, затем используют веб-безопасный шрифт, а после окончания загрузки текст перерисовывается. IE поступает похоже, но при этом не ждёт три секунды. Подобное поведение в разных браузерах можно унифицировать, используя свойство font‑display .
Свойство font-display
У свойства есть несколько значений, которые определяют поведение текста во время загрузки шрифта:

auto — поведение по умолчанию, зависит от браузера.
block — текст не отображается в течение короткого периода (3 секунды), затем отрисовывается запасной шрифт, если основной ещё не загрузился. Как только загрузка завершается, текст перерисовывается снова.
swap — сразу же отрисовывается запасной шрифт, после загрузки шрифта — повторный рендеринг.
fallback — в течение очень короткого периода (100 миллисекунд) не отображается ничего, затем браузер использует запасной шрифт и ждёт 3 секунды — если шрифт всё ещё не загрузился, остаётся запасной шрифт. Далее не важно, загрузился шрифт или нет, замена не произойдёт. Если шрифт загрузится, то он применится только при обновлении страницы.
optional — текст не отображается в течение 100 миллисекунд, а затем отрисовывается запасным шрифтом. Даже если шрифт загрузится после этого, замена произойдёт только при обновлении страницы.

Оптимальное значение — swap , его можно использовать в большинстве случаев, оно удобно для пользователей. При подключении шрифта с помощью Google Fonts это значение установлено по умолчанию. Если же есть необходимость избежать мелькания текста (например, для вдумчивого чтения), подойдёт optional .
Предзагрузка шрифтов
Ещё один способ оптимизации — предварительная загрузка шрифтов. С её помощью можно изменить обычную приоритизацию загрузки ресурсов, тем самым сказав браузеру, что важно загрузить шрифт в первую очередь.
Стоит учесть, что браузер загрузит шрифт в любом случае — даже если он не используется на странице. И, обладая высоким приоритетом, эта загрузка может блокировать загрузку других ресурсов, поэтому нужно грамотно выбирать, что именно предзагружать. Например, если на странице используются три разных шрифта, стоит предзагрузить только основной шрифт без дополнительных начертаний.
Для того, чтобы предзагрузка сработала, нужно поместить в ссылку на шрифт и задать атрибуту rel значение preload :
Также необходимо добавить тип ресурса, в данном случае — font . Предзагружать можно и другие ресурсы — CSS-файлы, изображения и так далее.
Уменьшение количества глифов шрифта
По умолчанию шрифт может содержать глифы (буквы, символы) разных языков и просто редко используемые. С помощью свойства unicode-range можно установить диапазон нужных символов в системе Unicode, тогда браузер будет подгружать сабсет (подмножество) шрифта только в тот момент, когда на странице появится символ из этого диапазона. Предварительно нужно подготовить файлы шрифтов, разбив их на группы.
Например, можно отдельно подключить латиницу и кириллицу, если на сайте представлены версии на двух языках. И с помощью unicode-range браузер поймёт, какой сабсет нужен для конкретной страницы, и загрузит только его. Такой файл будет иметь меньший вес и ускорит загрузку страницы.
Также можно проанализировать, какие конкретно глифы используются на сайте и создать кастомный сабсет исключительно с ними. Для этого есть специальные инструменты.
Google Fonts по умолчанию использует сабсеты. Это можно увидеть, открыв CSS-файл, который подключается в при использовании сервиса. Для каждого языка есть отдельный сабсет. Пример для латиницы и кириллицы:
/* latin */ @font-face < font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: local("Roboto"), local("Roboto-Regular"), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; >/* cyrillic */ @font-face < font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: local("Roboto"), local("Roboto-Regular"), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; >
В статье разобраны только базовые способы оптимизации шрифтов. Но даже их достаточно, чтобы улучшить пользовательский опыт и значительно уменьшить вес файлов шрифтов, ускорив тем самым загрузку страницы.
Полезности

HTML шорты: посторонние шрифты. Про подключение шрифтов и методы оптимизации.
Статья о font-display. В ней кроме прочего приведена наглядная схема того, как работают все значения свойства.
Исчерпывающее руководство по стратегиям загрузки веб-шрифтов. Подробный разбор плюсов и минусов методов подключения и оптимизации шрифтов.
Оптимизация шрифтов. В статье разобраны разные методы: использование сабсетов шрифтов в зависимости от языка, HTTP-кеширование, Font Loading API и так далее.
Доклад Вадима Макеева про шрифты.
Subsetting Fonts with Glyphhanger. Статья о том, как использовать инструмент для создания сабсетов.

Читать:
Как отследить чужой айфон