Добавление своего шрифта на сайт. Кроссбраузерный @font-face

Как правильно и кроссбраузерно подключить любой шрифт на свой сайт. Существует два основных метода. Подключение шрифтов со сторонних сервисов, как например Google fonts. Подключение удобно, но на загрузке сайта это конечно сказывается негативно. Ну и второй минус - ограниченное количество шрифтов.

Второй метод, - это подключение шрифта конструкцией @font-face. Этот метод более универсальный.

 Позволяет подключить совершенно любой шрифт, включая экзотические авторские шрифты. Минус этого метода - шрифт придётся генерировать, и конечно на пару строк кода будет больше при подключении.))) 

Генерировать код необходимо для кроссбраузерности. Вот примерная таблица совместимости браузеров и шрифтов.

Конструкцию @font-face   поддерживают  Internet Explorer 9, Firefox, Opera, Chrome, и Safari.
Формат WOFF                        поддерживают  Internet Explorer 9+, Firefox, Chrome, Safari, и Opera.
Формат TTF​                             поддерживают  Firefox, Chrome, Safari, и  Opera
Формат SVG                            поддерживают  Chrome, Safari и Opera.
Формат  EOT                           поддерживает   Internet Explorer.
Примечание: Internet Explorer 8 и более ранние версии, не поддерживают конструкцию @font-face.

Шаг 1.

Выбор и поиск подходящего шрифта. Я предпочитаю сервис fonts2U.com и конечно Google fonts

Шаг 2

После выбора я скачал шрифт в формате Ubuntu-Regular.ttf.  Далее, приступаем к генерации остальных форматов. В этом поможет сервис  WEBFONT GENERATOR. Загружаем полученный ранее шрифт и генерируем. В результате получается архив с основными форматами и демонстрационной страничкой. Все форматы можно сложить в папку fonts. 

Шаг 3

На последнем этапе правильно добавляем шрифты в css файл. Используем конструкцию @font-face.

@font-face {
font-family: 'Ubuntu';
src: url('fonts/ubuntu-regular-webfont.eot') ;
src: url('font/ubuntu-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('font/ubuntu-regular-webfont.woff') format('woff'),
url('font/ubuntu-regular-webfont.ttf') format('truetype'),
url('font/ubuntu-regular-webfont.svg#a_avantebsitalic') format('svg');
font-weight: normal;
font-style: normal;
}

Шрифт добавлен, и его можно использовать. Как пример:

body {  
 
font-family: 'Ubuntu', sans-serif;
 
 }

Таким образом получается правильное кроссбраузерное подключение нестандартных шрифтов.

Оставить комментарий

Похожие материалы