Как импортировать шрифты в HTML документ

Любой разработчик рано или поздно сталкивается с тем, что дизайнер в ходе создания макет импортировал в него "небезопасный" шрифт, и соответственно мы столкнемся с тем, что у некоторых пользователей шрифт будет не тем, какой планировал дизайнер. А значит теряется не только целостность задуманной дизайнером картинки, но и кроссбраузерность верстки.

Напомним, что на 2013 год список безопасных шрифтов включал в себя следующие шрифты:

font-family:Arial, Helvetica, sans-serif;
font-family:'Arial Black', Gadget, sans-serif;
font-family:'Bookman Old Style', serif;
font-family:'Comic Sans MS', cursive;
font-family:Courier, monospace;
font-family:'Courier New', Courier, monospace;
font-family:Garamond, serif;
font-family:Georgia, serif;
font-family:Impact, Charcoal, sans-serif;
font-family:'Lucida Console', Monaco, monospace;
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family:'MS Sans Serif', Geneva, sans-serif;
font-family:'MS Serif', 'New York', sans-serif;
font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family:Symbol, sans-serif;
font-family:Tahoma, Geneva, sans-serif;
font-family:'Times New Roman', Times, serif;
font-family:'Trebuchet MS', Helvetica, sans-serif;
font-family:Verdana, Geneva, sans-serif;
font-family:Webdings, sans-serif;

Что делать в такой ситуации? Есть два варианта разрешения этой проблемы и оба связаны с использованием CSS. Вариант 1-й – самостоятельно импортировать нужный шрифт. Вариант 2-й воспользоваться службой Google Fonts.

Самостоятельный импорт шрифтов

Для самостоятельного импорта шрифта необходимо найти сам шрифт в формате TTF. После этого лучше всего конвертировать шрифт TTF в EOT формат, после чего использовать оба файла:

@font-face {font-family:IsocteurIE;src:url(isocteur.eot);}
@font-face {font-family:Isocteur;src:url("isocteur.ttf") format("truetype");}

Объявление шрифта в стилях:

font:normal 16px Isocteur, IsocteurIE, Times, sans-serif;

Такой способ объявления шрифта гарантирует, что шрифт будет одинаково отображаться как в старых версиях Internet Explorer, так и в современных версиях всех браузеров.

Импорт шрифта через Google Fonts

Данный способ гораздо проще, потому что не связан с необходимостью находить и конвертировать файлы. Достаточно обратиться к службе Google Fonts (https://www.google.com/fonts), найти нужный для нас шрифт, выбрать quick use, и далее включить предоставленный код в верстку. Я предпочитаю включать шрифты через CSS:

@import url(https://fonts.googleapis.com/css?family=Dosis:400,600);

, но так же возможно влючение через тег link или через javascript.

Объявление шрифта в стилях будет аналогичным:

font-family: 'Dosis', Times, sans-serif;

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