@font-face - правило, которое позволяет указать шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удаленного сервера, либо с компьютера пользователя.
@font-face позволяет разрабатывать контент не ограничиваясь набором "безопасных" шрифтов (шрифтов, которые настолько распространены, что считаются доступными по умолчанию). Возможность определить локально установленный шрифт позволяет более гибко настраивать шрифты не полагаясь на соединение с интернетом.
Большое количество открытых для скачивания шрифтов вы можете найти на Google fonts.
Локальные шрифты
Правило @font-face src позволяет задать название локального шрифта, т.е. если у пользователя на компьютере уже установлен нужный шрифт, то будет использоваться именно он, при этом существенно увеличится скорость загрузки и отрисовки страницы.
@font-face {
font-family: 'Font Name';
src: local('Font Name'),
url(/fonts/font.ttf);
}
Можно указать несколько названий:
@font-face {
font-family: 'Font Name';
src: local('Font Name'), local('Font-Name'),
url(/fonts/font.ttf);
}
Форматы шрифтов
Сегодня используются четыре формата, рассмотрим их подробнее:
TTF / OTF – работают в большинстве браузеров, кроме IE.
EOT – создан Microsoft, представляет сжатую копию шрифта TTF, поддерживается только в IE.
WOFF – формат представляет собой сжатый шрифт в формате TTF/OTF.
WOFF2 – имеет улучшенное сжатие, по сравнению с первой версией.
Как видно нет единого формата, который поддерживается всеми браузерами, поэтому нужно делать подключение нескольких файлов, браузер сам выберет подходящий формат. Рекомендуется подключать файлы шрифтов по приоритету:
- WOFF2 для современных браузеров.
- WOFF для браузеров, которые не поддерживают WOFF2.
- TTF для устаревших браузерах
- EOT для поддержки IE.
@font-face {
font-family: 'Font Name';
src: local('Font Name'),
url('/fonts/font.woff2') format('woff2'),
url('/fonts/font.woff') format('woff'),
url('/fonts/font.ttf') format('ttf'),
url('/fonts/font.eot') format('eot');
}
Если каких-то шрифтов не хватает, то их можно получить с помощью сервисов onlinefontconverter.com или transfonter.org
