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

Подключение шрифтов в 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

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

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

Локальные шрифты

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

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

Форматы шрифтов

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

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

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

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

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

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

• WOFF2 для современных браузеров.
• WOFF для браузеров, которые не поддерживают WOFF2.
• TTF для устаревших браузерах
• EOT для поддержки IE.

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

Разные начертания шрифтов

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

Обычный:

Источник

Подключение шрифта к странице: как нужно делать сейчас

Возможность подключать шрифты к странице — это здорово! Во времена IE8 это еще и было прекрасной возможностью использовать векторную графику для иконок (IE8 поддерживает подключаемые шрифты, но не поддерживает SVG). Появилось много способов сконвертировать шрифт, в том числе, он-лайн-конвертеры, лучший из которых — Font Squirrel. Одна беда: люди просто копируют получаемый из генератора код, ничуть о нём не задумываясь.

Как сейчас нужно подключать шрифты

Как подключить несколько файлов одного шрифта и использовать одно название шрифта

Нередко, веб-шрифт — это несколько файлов: один файл — одно начертание (файл_1 — плотность 400, нормальный; файл_2 — плотность 400, италик, и так далее). А хочется везде при указании шрифта использовать одно его название, без упоминания в названии слов normal , italic , light и т.п., а указывать это в соответствующих CSS-свойствах.

Вариативные шрифты, для которых файл всего один, а вариантов начертания внутри много — отдельная тема, этот материал не о них.

Подключаем кучу файлов шрифта с указанием одного и того же имени, но разных font-weight и font-style :

И далее при указании селекторам шрифта и плотности, можно использовать одно имя, но разные плотности.

Как уже неактуально подключать шрифты

Для большинства проектов этот код неактуален, но может потребоваться для всякого старья с кроссбраузерностью IE8+ (привет, трилобиты!).

Если нужно взять шрифты с Google Fonts, но подключать их со своего хоста

google-webfonts-helper — превосходный сервис, который и шрифты даст скачать, и покажет код как их оптимальнее всего подключать (если забыть о FOUT).

© Николай Громов. Внутренняя Монголия, вечность, лето.

Источник