Подключение web шрифтов к сайту font-face

font-face подключение web шрифтовНу и начать раздел, где можно скачать Кириллические веб шрифты, было бы логично со статьи, как эти шрифты в форматах eot svg ttf woff woff2 подключить правильно к сайту. Данная статья будет закреплена первой в разделе, так как я и сам постоянно пользуюсь данной инструкцией, ну и, надеюсь Вам она тоже поможет.

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

1. Подключаем все форматы web шрифтов:

Рассмотрим на примере шрифта OpenSans. Пример подключения  в двух толщинах bold и normal:

font-family – как видим могут быть одинаковы, и далее в стилях можно прописывать только font-family: “OpenSans”. А при указании жирности шрифта font-weight: bold; или font-weight: normal; будет подгружаться соответствующий файл. Такой способ подойдет для всех браузеров и систем.

Но в век “оптимизации” когда сама страничка с ретина фото, джавой и прочей лабудой весит до 10мб, нам хочется сэкономить несколько кб на подключении шрифтов. Для “супер оптимизации” я частенько подключаю только шрифты в формате woff

2. Подключаем только woff формат web шрифта:

При таком способе подключения мы примерно в два раза сэкономим в размере. Но могут наблюдаться проблемы со старыми браузерами и некоторыми мобильными браузерами.

В данном примере сам font.css файл лежит в папке “css” а папка со шрифтами “fonts” находится в той же папке что и папка “css”. Будьте внимательны с путями к файлам шрифтов – это пожалуй единственная проблема которая может возникнуть при подключении шрифтов к Вашему сайту.

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *