Если не вникать в подробности, по быстрому подключить шрифт можно так:
/* Обычный */
@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;
}
Такой метод вполне работает в большинстве браузеров, но неверен. В данном примере упущено:
- Нет названия шрифта в свойстве
local
. - Подключен только один формат шрифта.
- Неправильно настроены начертания.
Правило @font-face
src
позволяет задать название локального шрифта, т.е. если у пользователя на компьютере уже установлен нужный шрифт, то будет использоваться именно он, при этом существенно увеличится скорость загрузки и отрисовки страницы.
Можно указать несколько названий:
Сегодня используются четыре формата, рассмотрим их подробнее:
TTF/OTF – работают в большинстве браузеров, кроме IE.
EOT – создан Microsoft, представляет сжатую копию шрифта TTF, поддерживается только в IE.
WOFF – формат представляет собой сжатый шрифт в формате TTF/OTF.
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');
}
Если в наборе есть не все форматы, их можно получить перекодировкой с помощью сервисов 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';
}
Жирный:
/* Жирный */
@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;
}
Курсив:
/* Курсив */
@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;
}
Жирный курсив:
/* Жирный курсив */
@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;
}
Другие начертания:
/* 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';
}
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>