Загрузка шрифтов CSS3

Это небольшая заметка о оформлении сайта загружаемыми шрифтами, написанная в 2016 году, с ориентацией на сравнительно современные браусеры.

Зачем?

Преимущества метода

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

Недостатки

не всеми браузерами поддерживается в полной мере. Хотя список уже очень достойный: IE 4+, Opera 10.5+, Firefox 3.5+, Chrome 2+, Safari 1+;
не бывает идеального кренинга пар букв в шрифте, и оформить отдельную надпись графическим элементом в фотошопе можно красивее;
та же "старославянская вязь", которую имитирует Izhitsa, характерна ещё и изменениями размеров и взаиморасположения букв в словах по вертикали, что неосуществимо простыми средствами стиля, но легко рисуется в графических программах
большой вес самого файла шрифта — может достигать нескольких мегабайт, и его уменьшение - отдельная весёлая задача;
пока подгружается шрифт, пользователь в одних браузерах (IE, Firefox, Opera) видит отображение текста обычным шрифтом, в других — вообще не видит текст (Safari, Chrome);
если вы заплатили за шрифт много денег, будет крайне обидно, если его утащат, а защититься от этого практически невозможно;
в разных браусерах могут наблюдаться мелкие баги рендеринга, особенно при наведении (:hover) — например, в Safari и Chrome не полностью перекрашивается текст

Как?

Вот у вас есть в наличии устраивающий вас шрифт IzhitsaRegular.ttf (для Windows). Для начала убедитесь в том, что отображение сайта с этим шрифтом вполне вас устраивает, и в нём нет пропущенных символов, используемых в текстах на сайте. Для этого установите шрифт себе в систему и пропишите в стиль сайта:
```
* { font-family: Izhitsa !important; }
```
После чего проверьте - всё ли хорошо на большей части страниц. Заметьте - на данной странице для заголовков применён шрифт Izhitsa, и хорошо видно, что в нём есть все русские буквы, но отсутствуют латинские N и n (см. ниже заголовки со словами Nokia, Windows, node.js).
Проверили - уберите шрифт из операционной системы и снова посмотрите на свой сайт, оставив вышеуказанную строку в стиле сайта. Шрифты на сайте должны поменяться на шрифт по умолчанию
Теперь уберите строку из стиля
Сконвертируйте ваш файл IzhitsaRegular.ttf в форматы: .eot .woff .svg
Залейте ВСЕ эти 4 файла в папку /fonts/ вашего сайта

Добавьте в стиль сайта следующие строки:

    @font-face {
        font-family: "Izhitsa";
        src: url("/fonts/IzhitsaRegular.eot");
        src: url("/fonts/IzhitsaRegular.eot?#iefix") format("embedded-opentype"),
             url("/fonts/IzhitsaRegular.woff") format("woff"),
             url("/fonts/IzhitsaRegular.ttf") format("truetype"),
             url("/fonts/IzhitsaRegular.svg#Izhitsa") format("svg");
        font-weight: normal;
        font-style: normal;
    }

Добавьте к тем элементам, которые Вы желаете видеть оформленными данным шрифтом, соответствующие определения стиля:
```
h1,h2,h3 { font-family: Izhitsa !important; }
```
Убедитесь в том, что у вас всё получилось

Примеры

Izhitsa

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789.:,;(:*!?'"«»)
ЙЦУКЕНГШЩЗХЪ йцукенгшщзхъ ФЫВАПРОЛДЖЭ фывапролджэ ЯЧСМИТЬБЮ ячсмитьбю

Загрузка шрифтов CSS3

Зачем?

Преимущества метода

Недостатки

Как?

Примеры

Izhitsa

Nokia

Контрольный Times

Сайты с особенными шрифтами

Об этом другие пишут...

Конвертеры под Windows

Конвертеры под node.js

Онлайн конвертеры