Рецепт идеального @font-face

04/03/2018
Konstantin Ostrovsky

Как правильно подключить сторонний шрифт и избежать распространенных ошибок? Как обеспечить полную поддержку стороннего шрифта всеми бразуерами?

Нередко в макетах сайтов дизайнеры используют сторонние шрифты для обеспечения более эффектного внешнего вида, либо соблюдения фирменного стиля компании.
Большинство шрифтов, конечно можно найти на CDN, но платные и коммерческие шрифты придется подключать самостоятельно. Для этого портебуется конвертировать шрифт и написать CSS-код его подключения.

Проверенные CDN:

Чаще всего шрифт предоставляется лишь в формате *.ttf, но для корректного отображения в Firefox, IE, Safari, этого будет не достаточно. Для того, чтобы получить шрифт в форматах eot, woff, woff2, svg нам потребуется конвертировать шрифт.

1. Конвертация шрифта

Для конвертации шрифта мы будем использовать веб сервис transfonter. Существует множество сервисов для конвертации шрифтов, но на данный момент наиболее стабильным я считаю transfonter. Он всегда без ошибок конвертирует шрифты и выдерживает высокие нагрузки при конвертации сразу нескольких шрифтов. Так же не могу не обратить внимание на то, что данный сервис генерирует очень качественный CSS - файл с правильным подключением шрифтов.
Но на всякий случай я собрал список наиболее популярных сервисов для конвертации шрифтов:

В качестве примера мы будем использовать самый популярный шрифт для блогов - Roboto. Загрузить его можно по ссылке Roboto.
Итак. У нас имеется 12 различных начертаний шрифта Roboto в формате .ttf


Открываем https://transfonter.org/ и загружаем сразу все 12 файлов.


Настраиваем генератор. Выбираем следующие пункты:

Остальные пункты относятся к превью(предпросмотру) перед скачиванием. Их мы рассматривать не будем.

Жмем кнопку "Convert!" и ожидаем 10~30 секунд пока шрифт конвертируется.

Скачиваем архив.

В архиве будет файлы конвертированного шрифта и один CSS - файл, в котором будет сгенерировано подключение шрифтов. Нас он и интересует.

2. Подключение стороннего шрифта

Как я уже говорил, transfonter дает отличный CSS - код. Разберем код подробнее.

Вот часть из сгенерированного CSS-файла:

/* This stylesheet generated by Transfonter (https://transfonter.org) on March 4, 2018 12:51 PM */
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic.eot');
    src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'),
        url('Roboto-ThinItalic.eot?#iefix') format('embedded-opentype'),
        url('Roboto-ThinItalic.woff2') format('woff2'),
        url('Roboto-ThinItalic.woff') format('woff'),
        url('Roboto-ThinItalic.ttf') format('truetype'),
        url('Roboto-ThinItalic.svg#Roboto-ThinItalic') format('svg');
    font-weight: 100;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-BoldItalic.eot');
    src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
        url('Roboto-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('Roboto-BoldItalic.woff2') format('woff2'),
        url('Roboto-BoldItalic.woff') format('woff'),
        url('Roboto-BoldItalic.ttf') format('truetype'),
        url('Roboto-BoldItalic.svg#Roboto-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}

В данном коде подключается Roboto 100 italic(очень тонкий, наклонный) и Roboto bold italic(жирный, наклонный).

Разберем по порядку все части кода:

  1. Правило для подключения шрифтов всегда начинается с @font-face и font-family.

    @font-face {
        font-family: 'Roboto';
        ...

    font-family - название шрифта в CSS. Уже на первых строчках легко можно допустить ошибку и вскоре получить неправильный @font-face.
    Можно заметить, что название файлов шрифта всегда разные и зачастую описывают начертание шрифта. Я нередко видел как некоторые программисты подключают шрифты и назвают их Roboto-BoldItalic, а второй Roboto-ThinItalic. Соответственно использование таких шрифтов далее будет выглядеть так:

    
            a{
                font-family:'Roboto-ThinItalic', Arial;
            }
            p{
                font-family:'Roboto-BoldItalic', Arial;
            }

    Ужасно? Не так ли?
    Правильнее было бы объединить шрифты одного семейства одинаковым названием. То есть написать название для обоих шрифтов Roboto.
    Но как же так? Как мне использовать наклонный шрифт или жирный?
    Так же как Вы делали это всегда. Указав font-weight или font-style.
    Появляется вопрос. Как подключить шрифт, чтобы он использовался только когда будут указаны соответствующие свойства?
    Рассмотрим на примере Roboto 100 italic.
    При подключении шрифта мы так же пишем такие свойства как font-weight и font-style. Зачем это делается? Эти свойства указывают при каких условиях будет использован данный шрифт.
    То есть, если написать при подключении шрифта:

    
               @font-face{
                   font-family:"Roboto";
                   font-weight: 100;
                   font-style: italic;
               }
           

    То он будет использоваться только при написании таких свойств html-элемента:

    
               /* Так будет использоваться Roboto 100 italic */
               p{
                   font-family:"Roboto";
                   font-weight: 100;
                   font-style: italic;
               }
               /* А так интерпритатор будет искать правило для Roboto bold normal */ 
               a{
                   font-family:"Roboto";
                   font-weight: normal;
                   font-style: bold;
               }
           
  2. Указываем файлы шрифта.

    
                ...
                src: url('Roboto-ThinItalic.eot');
                src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'),
                    url('Roboto-ThinItalic.eot?#iefix') format('embedded-opentype'),
                    url('Roboto-ThinItalic.woff2') format('woff2'),
                    url('Roboto-ThinItalic.woff') format('woff'),
                    url('Roboto-ThinItalic.ttf') format('truetype'),
                    url('Roboto-ThinItalic.svg#Roboto-ThinItalic') format('svg');
                ...
            

    Этот код универсальный. Изменяются лишь пути к файлам.
    Подключается несколько форматов шрифта для различных браузеров.
    local(..) - возможное название шрифта на устройстве пользователя. Если у пользователя уже установлен шрифт с названинем, указанным в local(), то файлы шрифта не будут загружены, а будет использоваться локальный шрифт.
    Количество правил local не ограничено

    Какие форматы шрифтов используются в IE или Firefox? Вот небольшой список соответствия:

    • EOT - Internet Explorer
    • WOFF - Все современные браузеры(Firefox, Chrome, Opera, Амиго!)
    • ttf - Safari, Android, IOS
    • SVG - Safari

  3. font-weight и font-style? WTF?

    Эти правила описывают свойства шрифта, для дальнейшего использования в CSS. То есть, если написать - font-weight:bold, то файл шрифта будет использоваться только когда Вы будете указывать font-weight:bold и соответствующий font-family.

    
               /* Только так! */
               p{
                  font-family:"Roboto";
                  font-weight:bold
               }
           

3. Правильное использование стороннего шрифта

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


    /* Roboto - основной. sans-serif - запасной */
    p {
        font-family:"Roboto", sans-serif;
    }

Названия сторонних шрифтов иногда могут содержать пробелы и спецсимволы. Чтобы код был валидным - название шрифта следует брать в кавычки. Пример:


    p {
        font-family: "Roboto Broboto-Moboto", sans-serif;
    }