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


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

Зачем?

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

Недостатки

Как?

  1. Вот у вас есть в наличии устраивающий вас шрифт IzhitsaRegular.ttf (для Windows). Для начала убедитесь в том, что отображение сайта с этим шрифтом вполне вас устраивает, и в нём нет пропущенных символов, используемых в текстах на сайте. Для этого установите шрифт себе в систему и пропишите в стиль сайта:
    * { font-family: Izhitsa !important; }
    
    После чего проверьте - всё ли хорошо на большей части страниц. Заметьте - на данной странице для заголовков применён шрифт Izhitsa, и хорошо видно, что в нём есть все русские буквы, но отсутствуют латинские N и n (см. ниже заголовки со словами Nokia, Windows, node.js).
  2. Проверили - уберите шрифт из операционной системы и снова посмотрите на свой сайт, оставив вышеуказанную строку в стиле сайта. Шрифты на сайте должны поменяться на шрифт по умолчанию
  3. Теперь уберите строку из стиля
  4. Сконвертируйте ваш файл IzhitsaRegular.ttf в форматы: .eot .woff .svg
  5. Залейте ВСЕ эти 4 файла в папку /fonts/ вашего сайта
  6. Добавьте в стиль сайта следующие строки:
        @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;
        }
    
  7. Добавьте к тем элементам, которые Вы желаете видеть оформленными данным шрифтом, соответствующие определения стиля:
    h1,h2,h3 { font-family: Izhitsa !important; }
    
  8. Убедитесь в том, что у вас всё получилось

Примеры

Izhitsa

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

Nokia

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

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

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

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

Радио Духовный Антихрист

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

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

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

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

[Under Construction]
Уборочный инвентарь и другие хозтовары оптом у нас www.aegis.ru