Подключение нестандартных шрифтов. Часть первая

В двух первых статьях мы расскажем обо всех особенностях подключения шрифтов. От форматов до кроссдоменности. Разберемся с оптимизацией и дескрипторами. Это будет выжимка из нашего опыта работы над проектом.

§Форматы файлов шрифтов

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

• eot - для Internet Explorer <= 8;
• woff - для Firefox, Internet Explorer >=9 и декстопных браузеров на webkit(Chrome, Safari и т.д.);
• ttf - поддерживается всеми браузерами за исключением IE(всех версий);
• svg поддерживается всеми браузерами на webkit, включая мобильные;

Самыми легковесными являются форматы woff и eot. Например, разница между woff и ttf может достигать 100%.

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

Исходя из поддержки форматов браузерами, мы теперь можем составить @font-face, который будет работать везде, включая мобильные браузеры.

@font-face {
    font-family: 'PT Sans';
    src: url('ptsans.eot');
    src: url('ptsans.eot?#iefix') format('embedded-opentype'),
         url('ptsans.woff') format('woff'),
         url('ptsans.ttf') format('truetype');
}

§Оптимизация

Разобравшись с форматами и подключением, давайте приступим к оптимизации. Из первого пункта мы уже узнали, что самые легковесные форматы — это woff и eot, которых хватает как раз для того, чтобы покрыть все существующие десктопные браузеры. Таким образом, если вы не планируете поддерживать мобильные устройства, то font-face будет выглядеть вот так:

@font-face {
    font-family: 'PT Sans';
    src: url('ptsans.eot');
    src: url('ptsans.eot?#iefix') format('embedded-opentype'),
         url('ptsans.woff') format('woff');
}

Кроме этого, у font-face есть еще одно правило, которое позволяет оптимизировать загрузку вашей страницы — это local. C помощью него мы можем проверить наличие шрифта на компьютере пользователя, и если таковой отсутствует, инициировать его загрузку. В local указывается полное наименование шрифта и его PostScript Name.

Вот такая запись font-face проверит наличие шрифта на компьютере:

@font-face {
    font-family: 'PT Sans';
    src: url('ptsans.eot');
    src: local('PT Sans'), local('PTSans-Regular'), 
         url('ptsans.eot?#iefix') format('embedded-opentype'),
         url('ptsans.woff') format('woff');
}

Для мобильных браузеров, в которых работает ttf, используйте gzip-сжатие файлов шрифтов. В результате вы получите экономию в весе до 40%.

§Кроссдоменность

Шрифты — это статика, которую многие предпочитают хранить на каком-нибудь отдельном домене, где настроено кэширование, или на стороннем хранилище(в облаке). Однако при загрузке шрифта с другого домена возникают проблемы в Firefox и Internet Explorer. Все дело в политике безопасности этих браузеров, они не позволяют загружать шрифты со сторонних доменов и даже с поддоменов.

Проблему можно решить переводом шрифта в base64 и поместить его в CSS. При этом надо учитывать, что шрифт в base64 весит больше оригинала и он загрузится всегда, в независимости от того используется он на загружаемой странице или нет.

Еще одним решением проблемы является управление политикой безопасности на домене, с которого идет загрузка файла шрифта. Для сервера на Apache в .htaccess можно прописать Access-Control-Allow-Origin *. Такая запись позволит всем доменам загружать контент с отдающего сервера. Для IE и Firefox этого достаточно.

На этом мы закончим первую часть. В следующей части расскажем про плюсы и минусы подключения шрифтов через font-family и font-weight\font-style. В результате покажем итоговый font-face.