Подключение шрифтов в CSS

29.03.2019 at 14:12


Можно значительно разнообразить внешний вид страницы, подключив к ней внешний шрифт. Для этого нужно воспользоваться правилом @font-face, который позволяет настроить шрифт или подгрузить необходимый стиль текста.

Подключение шрифта через CSS

Например, есть желание использовать в заголовках шрифт Raleway.ttf. Для этого необходимо создать в корневой папке сервера директорию «fonts» (или любую другую, на усмотрение разработчика) и скопировать туда нужный шрифт. После этого в самом низу файла со стилями прописывается код:

@font-face {
// название шрифта 
font-family: "RalewayRegular"; 
// адрес шрифта и тип 
src: url("../fonts/RalewayRegular.ttf") format("truetype"); 
font-style: normal; 
font-weight: normal; 
}

Разберем его более подробно. Свойство font-family позволяет установить семейство шрифта, которое будет применяться на сайте. Можно подключить несколько семейств, разделив их запятой. Если в названии подключаемого шрифта есть пробелы, его нужно заключить в кавычки.
Внимание: браузер действует так. Сначала он проверяет наличие первого шрифта на сервере. Если он отсутствует, то так же проверяется следующее имя. Поэтому рекомендуется использовать несколько шрифтов, где первый – желаемый, а дальше – запасные по мере убывания их «желанности». Заканчивать список нужно рядовым шрифтом, который точно будет на компьютере пользователя. По подобной схеме можно подключать шрифты любого формата.
После того, как будут прописаны правила для шрифта, необходимо привязать подключенный шрифт к необходимому элементу. В нашем примере это будет заголовок первого уровня.

h1{
font-family: "RalewayRegular";
}

При выставлении шрифта необходимо учитывать, что Internet Explorer младше девятой версии позволяет подключить шрифты только одного формата: EOT (Embedded OpenType).
Если имя пользователя в операционной системе написано кириллицей, могут возникать проблемы с отображением необходимого шрифта браузером Opera, который показывает стандартное начертание букв.
Рекомендуется прописывать шрифты сразу в трех форматах: eot, ttf, woff. Так можно реализовать поддержку разными браузерами. Причем порядок подключения шрифтов должен быть именно такой.
Процесс подключения шрифтов можно упростить с помощью сервиса fonts4web. Находим желаемый шрифт в перечне, скачиваем его и копируем в папку fonts. После этого сервис автоматически генерирует нужный код, после чего он вставляется в файл стилей.