en / ru

@font-face - подключение шрифтов

В не столь давние времена все красивости вставлялись на страницы картинками: тенюшки, скругления, нестандартные шрифты и текст с отбрасываемой тенью.
Но веб развивается очень быстро. Теперь всё это реализуемо в той или иной степени средствами CSS.

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

Нестандартный шрифт

Задумайтесь!

Дважды подумайте, действительно ли вам не обойтись без подключения шрифта!
Основным показателем того, что необходимо использовать нестандартный шрифт, является широкое использование этого шрифта в тексте, который явно будет изменяемым, т.е. который нельзя просто заменить картинками.
Также стоит убедиться, что дизайнер (а также заказчик) осознает, что он использует нестандартный шрифт, который ему может на самом деле и не так критичен. В результате указания на дополнительные сложности (см. далее) дизайнер даже может согласиться заменить шрифт на аналогичный из списка стандартных.

Не злоупотребляйте подключением шрифтов

И будьте готовы согласиться на такие неприятности, как:

  • Каждый подключаемы шрифт это дополнительный вес к загружаемой странице (30-150Кб примерно). Использование более одного шрифта на сайте может серьезно замедлить скорость загрузки страницы сайта.
  • При загрузке текстовые блоки принимают размеры, основываясь на стандартном/системном шрифте, и только после загрузки файлов нестандартных шрифтов происходит перерисовка страницы. Если подключаемый шрифт сильно отличается от уже отрисовавшегося стандартного - всю страницу может очень ощутимо "передернуть".
  • Многие браузеры "прячут" текст, то есть делают его невидимым, пока файл основного шрифта не подгружен. Этот эффект называют FOIT, эффект "белой вспышки".

Виды шрифтов, которые необходимы

  • минимум: *.ttf (*.otf) и *.eot
  • дополнительно: *.woff, *.svg

TTF (и его собрат OTF) используются большинством браузеров. Как всегда, отличается от остальных Internet Explorer (IE) для него нужен формат EOT. Чуть ниже я расскажу, как его получить.

WOFF представляет собой архив исходника OTF или TTF. Поддерживается большинством популярных браузеров, а файлы в WOFF обычно 2–2.5 раза легче.

SVG — для поддержки браузера Safari.

EOT - боль верстальщиков

Формат EOT получается конвертированием из имеющихся TTF/OTF.
В сети, конечно, хватает самых разнообразных конвертеров, но к ним я бы рекомендовал обращаться в последнюю очередь.
FontSquirrel logo Сначала надо обязательно попробовать использовать FontSquirrel.
Этот генератор выдает наилучшие результаты. Но не всё так безоблачно - на некоторые шрифты генератор может ругаться, т.к. шрифт может быть в BlackList или он защищен лицензией. Вот тогда (и только тогда) можно пускаться в поиски других путей (значительно менее надежных).

Шаблон для подключения шрифта

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

В CSS используемое имя шрифта будет 'Custom Font'. Если каких-то из приведенных в шаблоне шрифтов нет - можно просто удалять из правила.

Ежели вы хотите использовать вместо файла зашифрованный код, в этом случае к нам на помощь приходит base64, который работает по тому же принципу и с изображениями.
Однако для старого IE base64 не обрабатывается. Его подключаем по-старому.

@font-face {
	font-family: 'Custom Font';
	src: url('CustomFont.eot');
}
@font-face {
	font-family: 'Custom Font';
	src: url(data:font/woff;charset=utf-8;base64,ДАННЫЕ) format('woff'),
		 url(data:font/truetype;charset=utf-8;base64,ДАННЫЕ) format('truetype'),
		 url('CustomFont.svg#CustomFont') format('svg');
	font-weight: normal;
	font-style: normal;
}

Успростить процесс

Лучше всего вообще не ввязываться в конвертацию шрифтов, а использовать уже готовые от Google Webfonts.

Также можно обратиться к вспомогательному скрипту Web Font Loader.
Web Font Loader — JavaScript библиотека для расширенной работы c Google Fonts, Typekit, Fonts.com, Fontdeck. Также может работать и с отдельными шрифтами на вашем сервере. Скрипт позволяет использовать множество шрифтов, подгружая их последовательно. В отличие от стандартного подключения, на слабых соединениях показывается текст со стандартным шрифтом, до тех пор, пока не будет загружен шрифт.

Нюансы

  • IE 9. Наперекор своим предшественникам требует не EOT, а TTF шрифты.
  • Win/Mac/Linux. Проблема не часто замечается, но в последствии приводит к множеству "костылей" в стилях. Суть в том, что для шрифтов должны быть корректно прописаны параметры (именно в самом шрифте при его создании!), отвечающие за вертикальное выравнивание для всех(!) операционных систем. Но дизайнеры шрифтов вполне могут проигнорировать это требование.. И тогда получается, что под Windows всё ОК, а под Mac и Linux текст будет вертикально выровнен совсем иначе и потребуются дополнительные усилия для нормализации.

Полезные ресурсы

WhatTheFont - определение используемого шрифта по картинке
FontSquirrel - конвертер шрифтов + имеет свою базу уже готовых к использованию шрифтов
EverythingFonts - конвертер шрифтов
Google Webfonts - наиболее простой вариант использования нестандартных шрифтов. Google всё сделает за вас!
AllFonts.Ru - коллекция шрифтов

Альтернативы из прошлого

Cufon - превращает ваш TTF в JS, который сделает всю работу
sIFR - использует Flash для замены текста