Чтобы использовать на сайте какой-либо нестандартный шрифт (которого может не оказаться на компьютере пользователя), его необходимо подключить. Как это сделать?
Коллекция Google Fonts
Проще всего использовать сервис Google Fonts. Там достаточно выбрать подходящий шрифт из богатой коллекции, кастомизировать его (подобрать нужные начертания и языки) и получить готовую ссылочку. Выглядеть она будет примерно так:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&subset=cyrillic" rel="stylesheet">или так:
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&subset=cyrillic');в зависимости от способа подключения (в HTML или в CSS).
В обоих случаях сама ссылка одна и та же, отличается лишь обертка. Она должна подключить на сайт шрифт семейства Open Sans стандартного, жирного и курсивного начертания с латинскими (по умолчанию) и кириллическими символами. Скопируем ее в адресную строку браузера и посмотрим, как это работает. (можно перейти по ссылке)
Мы видим много-много строк текста, разбитых на сегменты. Да, примерно так шрифты к веб-страницам и подключаются.
Самостоятельное подключение
Не все шрифты можно найти на Google Fonts, плюс иногда хочется, чтобы подгрузка ресурсов не зависела от стороннего сервиса, пусть даже такого надежного, как Google. Ну и в конце концов, верстальщик должен уметь подключать шрифты 🙂
Основная проблема при работе со шрифтами — это разнообразие форматов. Если вы скачаете любой шрифт с того же самого Google Fonts, вы получите плотненький архивчик, содержащий обычно целых три (а то и больше) разных файла для одного и того же начертания.
Не будем вдаваться в подробности, какой браузер какой формат желает видеть, это тема для отдельной статьи. Просто примем как факт то, что для нормальной работы нам нужен и .eot, и .woff и даже таинственный .ttf.
Каждое начертание нужно будет указать отдельным правилом. Если требуется подключить обычный, жирный, курсивный и жирный курсивный виды шрифта, придется написать четыре инструкции.
Настройки шрифта
Каждое правило будет выглядеть примерно так:
@font-face {
font-family: 'Название шрифта';
font-weight: начертание шрифта (700, 400 и т.д.);
font-style: стиль шрифта (normal, italic);
src: url(адрес файла со шрифтом);
}С правилами font-weight и font-style все понятно, их нужно прописать для каждого начертания нужного шрифта. Font-family при этом остается неизменной. Именно указанное здесь имя будет использоваться во всех css-инструкциях для применения этого шрифта.
В моем случае css-файл начнется следующим образом:
@font-face {
font-family: 'Open Sans';
font-weight: normal;
font-style: normal;
src: url(font1-url);
}
@font-face {
font-family: 'Open Sans';
font-weight: normal;
font-style: italic;
src: url(font2-url);
}
@font-face {
font-family: 'Open Sans';
font-weight: 700;
font-style: normal;
src: url(font3-url);
}
@font-face {
font-family: 'Open Sans';
font-weight: 700;
font-style: italic;
src: url(font4-url);
}Если указать правильные адреса файлов и установить для какого-нибудь элемента жирный курсивный шрифт Open Sans, браузер обратится к файлу *font4-url, так как именно он содержит нужное начертание.
Это самые базовые настройки, можно указать любые другие допустимые в CSS характеристики шрифтов, например, font-variant или font-stretch. Можно и вообще никаких настроек не указывать, ограничиться только названием и адресом файла.
Файлы шрифта
Теперь обратимся непосредственно к файлам.
В качестве значения свойства src необходимо указать все файлы, содержащие разные форматы шрифта, перечислив их имена через запятую. Браузер будет перебирать их по одному, пока не встретит подходящий. Чтобы ему не приходилось загружать каждый файл для ознакомления, рядом обычно указывают формат в качестве подсказки.
Для нашего любимого Internet Explorer организуем особое подключение.
@font-face {
font-family: 'Open Sans';
font-weight: normal;
font-style: normal;
src: url(/fonts/OpenSans-Regular.eot); /* IE9 Compat Modes */
src: url(/fonts/OpenSans-Regular.eot#iefix) format('embedded-opentype'),
url(/fonts/OpenSans-Regular.woff) format('woff'),
url(/fonts/OpenSans-Regular.ttf) format('truetype'),
url(/fonts/OpenSans-Regular.svg#OpenSans-Regular) format('svg');
}
@font-face {
font-family: 'Open Sans';
font-weight: 700;
font-style: normal;
src: url(/fonts/OpenSans-Bold.eot); /* IE9 Compat Modes */
src: url(/fonts/OpenSans-Bold.eot) format('embedded-opentype'),
url(/fonts/OpenSans-Bold.woff) format('woff'),
url(/fonts/OpenSans-Bold.ttf) format('truetype'),
url(/fonts/OpenSans-Bold.svg#OpenSans-Bold) format('svg');
}Локальное подключение
Есть еще одна отличная опция, позволяющая до начала загрузки проверить, есть ли нужный шрифт на компьютере пользователя. В этом случае даже грузить ничего не придется, что позволит оптимизировать работу сайта. Для этого используется функция local(), которая идет самой первой в списке шрифтов. Можно указывать сразу несколько проверок с разными вариантами названия.
@font-face {
font-family: 'Open Sans';
font-weight: normal;
font-style: normal;
src: url(/fonts/OpenSans-Regular.eot); /* IE9 Compat Modes */
src: local('Open Sans Regular'), local('OpenSans-Regular'),
url(/fonts/OpenSans-Regular.eot) format('embedded-opentype'),
url(/fonts/OpenSans-Regular.woff) format('woff'),
url(/fonts/OpenSans-Regular.ttf) format('truetype'),
url(/fonts/OpenSans-Regular.svg#OpenSans-Regular) format('svg');
}Не всегда все необходимые форматы и разновидности шрифта есть в наличии. В этом случае можно использовать только имеющиеся, а браузер при необходимости постарается дорисовать то что есть (например, для создания курсивного начертания) или использует запасной шрифт.
6 комментариев