CSS Шрифт

Большинство веб-сервисов для подготовки кастомных шрифтов к вёрстке конвертируют шрифт в 4-5 разных форматов, при том что конвертировать имеет смысл только в один формат, в woff. Woff лёгок, и поддерживается всеми современными браузерами. При этом woff имеет смысл кодировать в base64 и вставить непосредственно в css файл с помощью data:uri.

Об этом ещё в 2012 году писал Артём Поликарпов. С тех пор, как я прочитал совет Артёма, я подготавливал все шрифты вручную, т. е. конвертировал файл сначала в woff, затем кодировал в base64, затем создавал css-файл и вставлял в него всё полученное. И мечтал о сервисе, который делал бы за меня всё это автоматически. Но, к сожалению, так и не нашёл такого, и поэтому сделал сам. Собственно вот:

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

Плюсы шрифта в css:

  • нужно подключить всего один файл;
  • меньше запросов к серверу;
  • текст не прыгает при загрузке шрифта.

Минусы:

  • не поддерживается ИЕ ниже 9-го.

От поддержки 8-го ИЕ я отказался (рекомендую и вам), по нескольким причинам:

  • шрифт в формате eot (специальный формат для ИЕ), у меня не работал практически никогда, и как сделать, чтоб заработал, я понятия не имел;
  • человеку с ИЕ 8 будет не до вашего кастомного шрифта, из-за которого этот браузер начнёт ещё больше тормозить, да ещё и сайт из-за него грузится дольше будет, поэтому имеет смысл подобрать стандартный шрифт.

Ссылки по теме:
Ещё один способ устранить ВОШ

Поделиться
Отправить
2 комментария
Валентин Силютин

А тем, кто использует LESS, достаточно написать так:

@font-face {
font-family: «PT Sans»;
src: local(«PT Sans»), data-uri(«PTS55F_W.woff») format(’woff’);
}

Думаю, в других CSS-препроцессорах тоже есть что-то подобное.

Валентин Силютин

P. S. local(«PT Sans») надо убрать, ибо в таком случае он уже не нужен.

Популярное