Нестандартные шрифты на странице при помощи @font-face

Внедрение web-шрифтов на вашу интернет-страничку по средством CSS-свойства @font-face, значительно разнообразит возможности дизайнеров сайтов.


Первая реализация встраиваемых веб-шрифтов состоялась в 1997 году с выходом на рынок браузер IE4, поддерживающий шрифты в формате EOT (Embedded OpenType). В IE4 появилась возможность встраивать шрифты .eot формата на веб-страницу при помощи CSS-свойства @font-face.

Однако первый блин получился комом - формат внедрения шрифтов на веб-страницу не нашёл поддержки у пользователей, разработчиков сайтов и производителей софта.

В 2007 году, разработчики Webkit заявили о поддержке CSS-свойства @font-face в новой версии своего движка, выбрав в качестве шрифтовых форматов .ttf и .otf. После этого последовал всплеск интереса к веб-шрифтам, появились браузеры с поддержкой @font-face и основанными на движке Webkit.

В конце 2009 года, разработчики браузера Firefox, анонсировали поддержку шрифтового формата .woff (Web Open Font Format), специально разработанного формата шрифта для веб-разработчиков, основанным на популярных форматах .ttf и .otf.

На сегодняшний день, популярны и поддерживается различными браузерами пять основных форматов шрифта: .eot, .ttf, svg, .woff и .woff2.

Поддержка шрифтового формата браузерами:

Internet Explorer 4+ — .eot;
Internet Explorer 9+ — .eot/.woff;
Edge 14+: - .woff2;

Firefox 3.5 — .ttf/.otf;
Firefox 3.6 — .ttf/.otf/.woff;
Firefox 47+ — .woff2;

Opera 9.6 — .svg;
Opera 10+ — .ttf/.otf/.svg;
Opera 11.1 — .ttf/.otf/.svg/.woff;
Opera 41+ — .woff2;

Chrome 3 — .svg;
Chrome 4+ — .svg/.ttf/.otf;
Chrome 5+ — .svg/.ttf/.otf/.woff;
Chrome 49+ — .woff2;

Safari 3.2+ — .ttf/.otf/.svg;
Safari 5.1+ — .ttf/.otf/.svg/.woff;
Safari 10+ — .woff2;

iOS Safari 3.2+ (iPhone/iPad) — .svg;
iOS Safari 4.2+ (iPhone/iPad) — .svg/.ttf/.otf;
iOS Safari 5.1+ (iPhone/iPad) — .svg/.woff;
iOS Safari 10+ (iPhone/iPad) — .woff2;

Opera Mobile 9.7 — .ttf/.otf/.svg;
Opera Mobile 11.5 — .ttf/.otf/.svg/.woff;

Android Browser 2.2+ - .ttf/.otf;
Android Browser 3 - 4.3 .svg/.ttf/.otf;
Android Browser 4.4+ .svg/.ttf/.otf/.woff;
Android Browser 5+ - .woff2;

* Источник: caniuse.com

Не секрет, что до сих пор в эпоху быстрого интернета, "вес" веб-страницы имеет большое значение. Самыми компактными форматами веб шрифта являются .woff2 и .eot, а самым большим - .svg.

Как можно увидеть из списка поддержки формата .svg, в основном используется в мобильных браузерах, и то сходит на нет.

Кроссбраузерный @font-face

На сегодняшний день кроссбраузерное CSS-свойство @font-face выглядит так:

@font-face{
   font-family: 'Myfont';
    src: url('fonts/myfont.eot');
    src: url('fonts/myfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/myfont.woff2') format('woff2'),
    url('fonts/myfont.woff') format('woff'),
    url('fonts/myfont.ttf') format('truetype'),
    url('fonts/myfont.svg#myfont') format('svg');
   }

* где myfont - имя вашего шрифта.

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

Код в этом случае будет выглядеть вот так:

@font-face{
   font-family: 'Myfont';
    src: url('fonts/myfont.eot');
    src: local('Myfont'), local('PostScript-Name'),
    src: url('fonts/myfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/myfont.woff2') format('woff2'),
    url('fonts/myfont.woff') format('woff'),
    url('fonts/myfont.ttf') format('truetype'),
    url('fonts/myfont.svg#myfont') format('svg');
   }

* В свойстве local указывается имя шрифта и данные из PostScript Name. (значения данного поля шрифта можно посмотреть в FontLab Studio, TransType, FontForge или другом шрифтовом редакторе или утилите)
 

Политика безопасности Firefox и IE, при загрузки шрифта со стороннего ресурса.

При загрузке веб-шрифта со староннего web-ресурса, возникают проблемы в Firefox и Internet Explorer, это связано с политикой безопасности этих браузеров, и запретом загрузки шрифтов со сторонних ресурсов.

Для обхода политики безопасности эти браузеров, необходимо на вашем сервере под управлением Apache, в корневом файле .htaccess прописать следующую строку:

Access-Control-Allow-Origin *.
 

Ещё одной проблемой загрузки веб-шрифтов является некорректно настроенные mime типы на сервере. Для устранения ошибки в корневом файле .htaccess пишем следующие строки:

AddType font/eot .eot
AddType font/ttf .ttf
AddType font/woff .woff
AddType font/otf .otf
 

Я не был сторонником веб-шрифтов, однако развитие технологии и появление более или менее одинакового рендринга в браузерах сподвигло и меня использовать активнее шрифты на веб страницах.

На сегодняшний день можно почти смело можно использовать только формат .woff, охват составляет 92.6% браузеров:

поддержка формата woff браузерами

А вот с поддержкой более компактого .woff2 дела обстоят ещё не лучшим образом - 72%:

поддержка формата woff2

В этом случае CSS-свойство @font-face будет выглядеть так:

@font-face {
    font-family: Myfont;
    src: url('myfont.woff2') format('woff2'),
    url('myfont.woff') format('woff');
}
* где myfont - имя вашего шрифта.

Иными словами, сначала загружается менее поддерживаемый формат .woff2, а если он не поддерживается браузером, то происходит подгрузка формата .woff.

Возможно в вашем корневом .htacess понадобится прописать mime тип:

AddType application/font-woff2  .woff2

Всё зависит от настроек вашего сервера.

Утилита для конвертирования в Веб-формат .woff.

sfnt2woff утилита которая конвертирует TrueType/OpenType шрифты в формат .woff простым перетаскиванием. Скачать её можете по ссылке: https://people-mozilla.org/~jkew/woff/

На самом деле в архиве представлены две утилиты, вторая - конвертирует из формата .woff в TrueType/OpenType.

Свойство font-feature-settings и работа с функциями OpenType.

CSS-свойство font-feature-settings позволяет значительно расширить работу с типографикой на веб-странице, используя расширенные функции стандарта OpenType. Однако повсеместное использование этого свойства всё ещё ограничивается отсутствием поддержки со стороны производителей софта.

На сегодняшний день поддержка font-feature-settings существует в следующих браузерах:

Internet Explorer 10+;
Firefox 29+;
Chrome 27+;
Opera 22+;
Android Browser 4.4+;
 

Как видно из приведённого списка свойство font-feature-settings на поддерживает Safari, в мобильной и настольной редакциях. Следовательно при создании сайта необходимо внимательнее отнестись к этому обстоятельству, дабы не разочаровать и не потерять часть аудитории.

Код css для вывода стандартных лигатур:

-moz-font-feature-settings: "liga=1";
-ms-font-feature-settings: "liga";
-webkit-font-feature-settings: "liga";
-o-font-feature-settings: "liga";
font-feature-settings: "liga";
 

Код css для вывода расширенных лигатур:

-moz-font-feature-settings: "dlig=1";
-ms-font-feature-settings: "dlig";
-webkit-font-feature-settings: "dlig";
-o-font-feature-settings: "dlig";
font-feature-settings: "dlig";
 

Код css для вывода дробей:

-moz-font-feature-settings:"frac" 1;
-moz-font-feature-settings:"frac=1";
-ms-font-feature-settings:"frac" 1;
-o-font-feature-settings:"frac" 1;
-webkit-font-feature-settings:"frac" 1;
font-feature-settings:"frac" 1;
 

Код css для вывода старостильных цифр:

-moz-font-feature-settings:"onum" 1;
-moz-font-feature-settings:"onum=1";
-ms-font-feature-settings:"onum" 1;
-o-font-feature-settings:"onum" 1;
-webkit-font-feature-settings:"onum" 1;
font-feature-settings:"onum" 1;
 

Код css для вывода капители:

-moz-font-feature-settings:"smcp" 1;
-moz-font-feature-settings:"smcp=1";
-ms-font-feature-settings:"smcp" 1;
-o-font-feature-settings:"smcp" 1;
-webkit-font-feature-settings:"smcp" 1;
font-feature-settings:"smcp" 1;
 

Код css для вывода концовок и росчерков:

-moz-font-feature-settings:"swsh" 1;
-moz-font-feature-settings:"swsh=1";
-ms-font-feature-settings:"swsh" 1;
-o-font-feature-settings:"swsh" 1;
-webkit-font-feature-settings:"swsh" 1;
font-feature-settings:"swsh" 1;
 

Код css для вывода надстрочных символов:

-moz-font-feature-settings:"sups" 1;
-moz-font-feature-settings:"sups=1";
-ms-font-feature-settings:"sups" 1;
-o-font-feature-settings:"sups" 1;
-webkit-font-feature-settings:"sups" 1;
font-feature-settings:"sups" 1;
 

Код css для вывода подстрочных символов:

-moz-font-feature-settings:"subs" 1;
-moz-font-feature-settings:"subs=1";
-ms-font-feature-settings:"subs" 1;
-o-font-feature-settings:"subs" 1;
-webkit-font-feature-settings:"subs" 1;
font-feature-settings:"subs" 1;
 

Код css для вывода кернинговых пар из таблицы 'kern':

-moz-font-feature-settings:"kern" 1;
-moz-font-feature-settings:"kern=1";
-ms-font-feature-settings:"kern" 1;
-o-font-feature-settings:"kern" 1;
-webkit-font-feature-settings:"kern" 1;
font-feature-settings:"kern" 1;
 

Код css для вывода контекстных альтернатив:

-moz-font-feature-settings:"calt" 1;
-moz-font-feature-settings:"calt=1";
-ms-font-feature-settings:"calt" 1;
-o-font-feature-settings:"calt" 1;
-webkit-font-feature-settings:"calt" 1;
font-feature-settings:"calt" 1;
 

Код css для вывода стилистических альтернатив:

-moz-font-feature-settings:"salt" 1;
-moz-font-feature-settings:"salt=1";
-ms-font-feature-settings:"salt" 1;
-o-font-feature-settings:"salt" 1;
-webkit-font-feature-settings:"salt" 1;
font-feature-settings:"salt" 1;
 

Код css для вывода стилистических наборов (в данном случае 2-й набор):

-moz-font-feature-settings:"ss02" 1;
-moz-font-feature-settings:"ss02=1";
-ms-font-feature-settings:"ss02" 1;
-o-font-feature-settings:"ss02" 1;
-webkit-font-feature-settings:"ss02" 1;
font-feature-settings:"ss02" 1;
 

Свойства CSS позволяют объединять текущий код:

.feature {
-moz-font-feature-settings:"pnum" 1,"onum" 1,"ss02" 1,"kern" 1;
-moz-font-feature-settings: "pnum=1,onum=1,ss02=1,kern=1";
-ms-font-feature-settings:"pnum" 1,"onum" 1,"ss02" 1,"kern" 1;
-o-font-feature-settings:"pnum" 1,"onum" 1,"ss02" 1,"kern" 1;
-webkit-font-feature-settings:"pnum" 1,"onum" 1,"ss02" 1,"kern" 1;
font-feature-settings:"pnum" 1,"onum" 1,"ss02" 1,"kern" 1;
}

В представленном примере четыре функции "pnum","onum","ss02" и "kern" объеденены в блоки для кроссбраузерной работы.

Информаця по теме:

https://dev.w3.org/webfonts/WOFF2/spec
https://css-tricks.com/snippets/css/using-font-face
https://css-tricks.com/almanac/properties/f/font-feature-settings/
https://www.typotheque.com/articles/opentype_features_in_css
http://caniuse.com/#feat=woff2

Продолжение по данной тематике появится после выхода спецификации CSS4 и поддержке OpenType Variations браузерами...