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

Если не вникать в подробности, по быстрому подключить шрифт можно так:

/* Обычный */
@font-face {
	font-family: 'FontName'; 
	src: url(/fonts/font.ttf); 
}

/* Жирный */
@font-face {
	font-family: 'FontName bold'; 
	src: url(/fonts/font-bold.ttf); 
}

.text-1 {
	font-family: 'FontName'; 
	font-size: 20px;
}

.text-2 {
	font-family: 'FontName bold'; 
	font-size: 20px;
}
CSS

Такой метод вполне работает в большинстве браузеров, но неверен. В данном примере упущено:

  • Нет названия шрифта в свойстве local.
  • Подключен только один формат шрифта.
  • Неправильно настроены начертания.

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

@font-face {
	font-family: 'Font Name'; 
	src: local('Font Name'),
		url(/fonts/font.ttf); 
}
CSS

Можно указать несколько названий:

@font-face {
	font-family: 'Font Name'; 
	src: local('Font Name'), local('Font-Name'),
		url(/fonts/font.ttf); 
}
CSS

Сегодня используются четыре формата, рассмотрим их подробнее:

TTF/OTF – работают в большинстве браузеров, кроме IE.

TTF / OTF – поддержка в браузерах

EOT – создан Microsoft, представляет сжатую копию шрифта TTF, поддерживается только в IE.

EOT – поддержка в браузерах

WOFF – формат представляет собой сжатый шрифт в формате TTF/OTF.

WOFF – поддержка в браузерах

WOFF2 – имеет улучшенное сжатие, по сравнению с первой версией.

WOFF2 – поддержка в браузерах

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

  • WOFF2 для современных браузеров.
  • WOFF для браузеров, которые не поддерживают WOFF2.
  • TTF для устаревших браузерах
  • EOT для поддержки IE.
@font-face {
  font-family: 'Font Name';
  src: local('Font Name'),
	   url('/fonts/font.woff2') format('woff2'), 
	   url('/fonts/font.woff') format('woff'),
	   url('/fonts/font.ttf') format('ttf'),
	   url('/fonts/font.eot') format('eot');
}
CSS

Если в наборе есть не все форматы, их можно получить перекодировкой с помощью сервисов onlinefontconverter.com или convertio.co.

Пример подключения шрифта «Crimson Text» в разных начертаниях:

Обычный:

/* Обычный */
@font-face {
	font-family: 'Crimson Text';
	font-style: normal;
	font-weight: normal;
	src: local('Crimson Text'),
		url('/fonts/CrimsonText-Regular.woff2') format('woff2'), 
		url('/fonts/CrimsonText-Regular.woff') format('woff'),
		url('/fonts/CrimsonText-Regular.ttf') format('ttf'),
		url('/fonts/CrimsonText-Regular.eot') format('eot');
}

.text-1 {
	font-family: 'Crimson Text';
}
CSS

Жирный:

/* Жирный */
@font-face {
	font-family: 'Crimson Text';
	font-style: normal;
	font-weight: bold;
	src: local('Crimson Text'),
		url('/fonts/CrimsonText-Bold.woff2') format('woff2'), 
		url('/fonts/CrimsonText-Bold.woff') format('woff'),
		url('/fonts/CrimsonText-Bold.ttf') format('ttf'),
		url('/fonts/CrimsonText-Bold.eot') format('eot');
}

.text-2 {
	font-family: 'Crimson Text';
	font-weight: bold;
}
CSS

Курсив:

/* Курсив */
@font-face {
	font-family: 'Crimson Text';
	font-style: italic;
	font-weight: normal;
	src: local('Crimson Text'),
		url('/fonts/CrimsonText-Italic.woff2') format('woff2'), 
		url('/fonts/CrimsonText-Italic.woff') format('woff'),
		url('/fonts/CrimsonText-Italic.ttf') format('ttf'),
		url('/fonts/CrimsonText-Italic.eot') format('eot');
}

.text-3 {
	font-family: 'Crimson Text';
	font-style: italic;
}
CSS

Жирный курсив:

/* Жирный курсив */
@font-face {
	font-family: 'Crimson Text';
	font-style: italic;
	font-weight: bold;
	src: local('Crimson Text'),
		url('/fonts/CrimsonText-BoldItalic.woff2') format('woff2'), 
		url('/fonts/CrimsonText-BoldItalic.woff') format('woff'),
		url('/fonts/CrimsonText-BoldItalic.ttf') format('ttf'),
		url('/fonts/CrimsonText-BoldItalic.eot') format('eot');
}

.text-4 {
	font-family: 'Crimson Text';
	font-weight: bold;
	font-style: italic;
}
CSS

Другие начертания:

/* SemiBold */
@font-face {
	font-family: 'Crimson Text SemiBold';
	font-style: normal;
	font-weight: normal;
	src: local('Crimson Text SemiBold'),
		url('/fonts/CrimsonText-SemiBold.woff2') format('woff2'), 
		url('/fonts/CrimsonText-SemiBold.woff') format('woff'),
		url('/fonts/CrimsonText-SemiBold.ttf') format('ttf'),
		url('/fonts/CrimsonText-SemiBold.eot') format('eot');
}

.text-5 {
	font-family: 'Crimson Text SemiBold';
}

/* SemiBold Italic */
@font-face {
	font-family: 'Crimson Text SemiBold Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Crimson Text SemiBold Italic'),
		url('/fonts/CrimsonText-SemiBoldItalic.woff2') format('woff2'), 
		url('/fonts/CrimsonText-SemiBoldItalic.woff') format('woff'),
		url('/fonts/CrimsonText-SemiBoldItalic.ttf') format('ttf'),
		url('/fonts/CrimsonText-SemiBoldItalic.eot') format('eot');
}

.text-6 {
	font-family: 'Crimson Text SemiBold Italic';
}
CSS

HTML-код:

<p class="text-1">Crimson Text Regular</p>
<p class="text-2">Crimson Text Bold</p>
<p class="text-3">Crimson Text Italic</p>
<p class="text-4">Crimson Text Bold Italic</p>
<p class="text-5">Crimson Text Semi Bold</p>
<p class="text-6">Crimson Text Semi Bold Italic</p>
HTML

Результат:

14.02.2020, обновлено 28.05.2021
64126
Предыдущая запись Работа с JSON в PHP
Следующая запись Стилизация Checkbox

Комментарии 3

ogabek modaminov ogabek modaminov
20 июня 2020 в 19:06
0
было очень полезно, спасибо)
Makle Makle Makle Makle
22 февраля 2021 в 21:23
0
Четко, понятно, вполне подробно. Спасибо.
Артем Бурлака Артем Бурлака
26 апреля 2021 в 02:46
0
По приведенным таблицам caniuse достаточно использовать форматы WOFF и WOFF2

, чтобы добавить комментарий.

Другие публикации

Сброс стилей (CSS reset)
Цель сброса стилей состоит в том, чтобы уменьшить разность отступов, размеров шрифтов заголовков и т.д. заданных по умолчанию в разных браузерах.
28340
+1
Буквица CSS
Буквица, или инициал – первая буква главы или раздела, выделяется цветом и шрифтом. В CSS есть несколько способов задать стили первой букве...
3825
+2
Расстояние между буквами, строками, ширина табуляции в CSS
Демонстрация возможностей CSS для настройки расстояний между буквами, строками, табуляции и других свойств шрифтов.
7387
+1
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
26777
+6
Ускорение загрузки изображений и скриптов
Современные браузеры имеют поддержку предварительной загрузки ресурсов, указав в head страницы теги link с их адресами...
10164
+3
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
21991
+25