Введение §

@fontface указать шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удалённого сервера, либо с компьютера пользователя.

Если в правиле была объявлена функция local(), с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт.

Иначе будет скачан и использован шрифт, указанный в функции url().

@font-face позволяет разрабатывать контент не ограничиваясь набором “безопасных” шрифтов (шрифтов, которые настолько распространены, что считаются доступными по умолчанию).

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

Использование локального и загружаемого шрифта §

Распространённым случаем является одновременное использование url() и local(), чтобы использовать#локальный-шрифт, если он доступен, или иначе скачать копию шрифта.

Это правило может использоваться не только на верхнем уровне CSS, но и внутри любого @-правила (en-US).

@font-face {
 font-family: "Open Sans";
 src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

Подключение шрифта в head-документа §

Подключить шрифт:

1. font-family (font-family: “PT Sans”, “Arial”, sans-serif;) – желаемый шрифт, менее желаемый, общий тип шрифта

2. Через src: url (адрес файла шрифта) format(его формат) + можно добавить font-weight: 500; font-style: normal;

3. Также с помощью функции local можно добавить возможность перед загрузкой шрифта с сервера проверить, установлен ли он на компьютере пользователя. Если да, запроса к серверу за шрифтом не будет — при#рендеринг используется локальная версия

Подключение шрифтов с помощью Google Fonts §

Есть простой и удобный способ подключить нестандартный шрифт — использовать Google Fonts. Это бесплатный сервис, с помощью которого можно подключать шрифты, но не хранить их на своём сервере. Чтобы им воспользоваться, необходимо выбрать шрифт и добавить одно или несколько нужных начертаний, а затем вставить в head ссылку, которую сгенерирует Google Fonts во вкладке Embed.

Этого достаточно, чтобы шрифт подключился. Теперь его можно использовать в свойстве font-family без каких-либо дополнительных действий.

body{  font-family: "Roboto", "Arial", sans-serif;  
}

Подключение шрифтов с помощью @font-face §

Есть альтернативный способ, при котором файлы со шрифтами хранятся вместе с остальными ресурсами сайта. Для них принято заводить отдельную директорию в корне проекта — например, fonts. В неё следует поместить файлы для каждого начертания в нужных форматах — в большинстве случаев, если не требуется поддержка старых браузеров, подойдут .woff и .woff2, о которых мы говорили ранее. Шрифты можно скачать на различных ресурсах. При этом всегда нужно обращать внимание на лицензию — некоторые шрифты могут быть недоступны для коммерческого использования.

После того, как шрифты добавлены в проект, их нужно подключить в CSS-файле. Для этого используется правило @font-face. В самом базовом варианте оно будет включать:

1. Название шрифта, которое затем нужно использовать, чтобы задать элементам подключённый шрифт.
2. Адрес файла со шрифтом, который нужно подключить, и его формат. Если адресов несколько, их можно указать через запятую. В этом случае важен порядок — браузер будет последовательно пытаться подключить файлы. Первым должен быть самый подходящий формат, а далее — запасные варианты.
   Также с помощью функции local можно добавить возможность перед загрузкой шрифта с сервера проверить, установлен ли он на компьютере пользователя. Если да, запроса к серверу за шрифтом не будет — при рендеринге используется локальная версия. Но у этого способа есть минус — шрифт на компьютере пользователя может быть устаревшим, и тогда страница отобразится не совсем так, как было задумано.
3. Начертания: жирное, курсивное и так далее. Для каждого начертания нужно отдельное правило @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-family: "Roboto", "Arial", sans-serif;  
}

Для улучшения производительности правило @font-face лучше всего прописывать в самом начале CSS-файла. Так браузер сможет раньше начать обработку шрифта.