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

Как правильно, и кросcбраузерно подключить любой шрифт на свой сайт. Существует два основных метода. Подключение шрифтов состороних сервисов, как например 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;
 
 }

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

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

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