Как известно, при рендеринге браузер старается использовать системные шрифты, которые предустановлены (или уже установлены вручную) в ОС. Но что делать, если таких шрифтов там нет? Например, нужно использовать какой-то совсем нестандартный шрифт или заставить браузер под Linux’ом корректно отображать чисто виндовый шрифт, которого в системе точно нет.
Выход из этой ситуации прост — нужно отдать браузеру шрифт с сервера, на котором работает сайт. Сделать это довольно просто.
Для начала находим нужный нам шрифт, скорее всего он будет в формате *.ttf. Для примера я взял использованный мной ранее специфичный шрифт — Digital-7, представляющий собой классический семисегментный индикатор, который я использовал для имитации экрана виртуального девайса. Скачиваем себе файл шрифта.
Далее его нужно сконвертировать в несколько форматов. Да, это будет один и тот же шрифт, но в разных форматах. Необходимо это для того, чтобы во всем зоопарке браузеров работало у вас все одинаково, а не классически «Под виндой в хроме норм, а под линуксом в файрфоксе все разлетелось». Нужны следующие форматы:
| Формат файла | Браузер |
|---|---|
| *.eot | IE9 Compat Modes |
| *.woff2 | Последние версии браузеров |
| *.woff | Последние версии + IE9 |
| *.ttf | Старые Safari, Android, iOS |
Сконвертировать файл *.ttf в нужные форматы можно с помощью онлайн-конвертера, например этого — https://onlinefontconverter.com/. Там все просто, расписывать процесс не буду.
После этого нужно скопировать все полученные файлы, включая исходный *.ttf в каталог, где лежит CSS-файл. В самом файле пишем следующую настройку для семейства шрифтов:
@font-face {
font-family: 'Digital-7 Mono';
src: local('Digital-7Mono.eot'),
url('Digital-7Mono.eot?#iefix') format('embedded-opentype'),
url('Digital-7Mono.woff2') format('woff2'),
url('Digital-7Mono.woff') format('woff'),
url("digital-7-mono.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
Не забудьте проверить, что имена файлов в блоке указаны верно, иначе работать ничего не будет.
В принципе, на этом все. При обращении к шрифту браузер будет проверять, есть ли такой шрифт в системе, и при его отсутствии запрашивать его у сервера, который и будет отдавать браузеру нужную версию файла.