CSS Шрифт

Tue, 26 Aug 2014 00:19:32 +0400

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

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

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

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

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

Минусы:

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

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

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

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

Техноблог, заметки с тегом: шрифты

CSS Шрифт