Подключение шрифтов в CSS | В паутине

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

Чтобы использовать на сайте какой-либо нестандартный шрифт (которого может не оказаться на компьютере пользователя), его необходимо подключить. Как это сделать?

Коллекция Google Fonts

Проще всего использовать сервис Google Fonts. Там достаточно выбрать подходящий шрифт из богатой коллекции, кастомизировать его (подобрать нужные начертания и языки) и получить готовую ссылочку. Выглядеть она будет примерно так:

или так:

в зависимости от способа подключения (в HTML или в CSS).

В обоих случаях сама ссылка одна и та же, отличается лишь обертка. Она должна подключить на сайт шрифт семейства Open Sans стандартного, жирного и курсивного начертания с латинскими (по умолчанию) и кириллическими символами. Скопируем ее в адресную строку браузера и посмотрим, как это работает. (можно перейти по ссылке)

Мы видим много-много строк текста, разбитых на сегменты. Да, примерно так шрифты к веб-страницам и подключаются.

Самостоятельное подключение

Не все шрифты можно найти на Google Fonts, плюс иногда хочется, чтобы подгрузка ресурсов не зависела от стороннего сервиса, пусть даже такого надежного, как Google. Ну и в конце концов, верстальщик должен уметь подключать шрифты 🙂

Основная проблема при работе со шрифтами — это разнообразие форматов. Если вы скачаете любой шрифт с того же самого Google Fonts, вы получите плотненький архивчик, содержащий обычно целых три (а то и больше) разных файла для одного и того же начертания.

Не будем вдаваться в подробности, какой браузер какой формат желает видеть, это тема для отдельной статьи. Просто примем как факт то, что для нормальной работы нам нужен и .eot и .woff и даже таинственный .ttf.

Каждое начертание нужно будет указать отдельным правилом. Если требуется подключить обычный, жирный, курсивный и жирный курсивный виды шрифта, придется написать четыре инструкции.

Настройки шрифта

Каждое правило будет выглядеть примерно так:

С правилами font-weight и font-style все понятно, их нужно прописать для каждого начертания нужного шрифта. Font-family при этом остается неизменной. Именно указанное здесь имя будет использоваться во всех css-инструкциях для применения этого шрифта.

В моем случае css-файл начнется следующим образом:

Если указать правильные адреса файлов и запросить для некого элемента жирный курсивный шрифт Open Sans, браузер обратится к файлу *font4-url’, так как именно он содержит нужное начертание.
Это самые базовые настройки, можно указать любые другие допустимые в CSS характеристики шрифтов, например, font-variant или font-stretch. Можно и вообще никаких настроек не указывать, ограничиться только названием и адресом файла.

Файлы шрифта

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

Локальное подключение

Есть еще одна отличная опция, позволяющая до начала загрузки проверить, есть ли нужный шрифт на компьютере пользователя. В этом случае даже грузить ничего не придется, что позволит оптимизировать работу сайта. Для этого используется функция local(), которая идет самой первой в списке шрифтов. Можно указывать сразу несколько проверок с разными вариантами названия.

Не всегда все необходимые форматы и разновидности шрифта есть в наличии. В этом случае можно использовать только имеющиеся, а браузер при необходимости постарается дорисовать то что есть (например, для создания курсивного начертания) или использует запасной шрифт.

Комментарии (4)

Ваш email не будет опубликован. Все поля обязательны

    Спасибо за хорошую статью.
    Скажите а если font уже загружен в кеш браузера функция local() как нибудь поможет или она действует только на системные шрифты на компьютере ?

    Вы когда-нибудь слышали про Google Fonts? Если вкратце — это сервис, с помощью которого вы можете подключить более 700 шрифтов на свой сайт.

    Обратите внимание на первый же подзаголовок материала)) Разумеется, я слышала про гугл фонтс.