Заказать вёрстку
  • verstka.pro

Нестандартные шрифты в HTML через @font-face

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

Что ж, приступим.

Необходимый минимум

CSS-код для подключения шрифта выглядит следующим образом:

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

See the Pen Пример @font-face by Alexander (@CSR) on CodePen.

  • В параметре font-family нужно указать название шрифта (не начертания!). Это семантически верно и очень удобно, вместо того, чтобы указывать нечто типа pt_sans или my-ptsans-font.
  • Параметры src должны содержать пути до шрифтов разнообразных форматов, чтобы обеспечить кроссбраузерность (как получить все эти файлы, читайте ниже). Для формата SVG, через символ #, необходимо указать начертание подключаемого шрифта. В нашем случае это PT Sans Regular (если бы мы подключали жирное начертание, эта строка выглядела бы как PT Sans Bold и т.п.)
  • В параметре font-weight нужно указать жирность шрифта. Самые распространённые значения: normal и bold. Но можно указать и другие, согласно спецификации CSS.
  • Параметр font-style сообщает, является ли шрифт курсивным. Если это так, укажите italic. Если нет — оставьте normal

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

Лирическое отступление

Многие любят указывать в font-family свойства начертания (например, pt_sans_bold), а font-weight и font-style оставлять в значении normal.

Это совершенно неверный подход. Потому что вам придётся полностью отказаться от font-weight и font-style везде, а чтобы задать жирность или курсив, постоянно переназначать font-family. Ведь браузер не знает, что pt_sans_bold на самом деле жирный.

Предположим, вы определили таким методом два начертания: обычное (font-family: pt_sans_regular) и жирное (font-family: pt_sans_bold). Затем решили какой-то элемент сделать жирным, и прописали для него font-weight: bold;. Браузер, не найдя в гарнитуре нужного начертания (он будет искать font: bold pt_sans_regular;), попытается сделать жирный шрифт из обычного. Текст в такой ситуации будет совершенно не похож на настоящий bold. Этот эффект затронет все теги b, strong, i и em (они будут выглядеть не так, как должны).

Да и вообще, вы же пишете font: bold 12px Arial;, а не font: 12px arial_bold; =)

Облачные сервисы

Возвращаясь к вопросу создания пригодных для веба шрифтов, нельзя не отметить сервисы, которые позволят вам даже не обращаться к написанию CSS-кода.

Google Fonts

Одним из самых популярных и удобных сервисов является Google Fonts. Его каталог содержит более 250 гарнитур, из которых более 50 поддерживают кириллицу. Сервис имеет простой пошаговый интерфейс с возможностью выбора начертаний, языка и метода подключения шрифта (добавьте в свой код одну строку, и вот на сайте уже новый шрифт!).

Неоспоримым преимуществом сервиса является то, что все шрифты совершенно бесплатны и не имеют ограничений по использованию. Кроме того, использование Google Fonts может ускорить ваш сайт, так как у многих ваших посетителей в кэше браузера уже будут находиться шрифты с серверов Google (ведь сервис очень распространён).

webfont.ru

webfont.ru — русскоязычный сервис, предоставляющий функционал, подобный Google Fonts, и имеющий ещё кучу всяких полезностей для работы с веб-шрифтами. Коллекция состоит из более чем 450 шрифтов, из которых более 300 — с кириллицей. Процедура подключения шрифта очень проста.

Платные сервисы

Если вдруг среди бесплатных шрифтов вам ничего не приглянулось, всегда есть возможность обратиться к платным облачным каталогам. Таких ресурсов сейчас довольно много, и распространены они, в основном, на западе. Выбор шрифтов просто огромен. Купить можно как «настольную» версию, так и непосредственно webfont. Не забудьте перед покупкой почитать условия. Вот ссылки на некоторые платные каталоги:

webfont-генераторы

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

FontSquirrel

FontSquirrel — самый качественный на данный момент сервис конвертации шрифтов. Поддерживает множественную конвертацию (до 4 файлов одновременно), сразу генерирует CSS-файл для подключения. Немаловажно, что сконвертированные шрифты не имеют визуальных отличий от оригинала. Имеет множество настроек, с помощью которых можно добиться необходимого результата.

Если вы новичок, то смело используйте режим Basic и не задумывайтесь.

Если вдруг результат не устроил (например, не отображаются русские символы или что-то работает не так, как вы хотите), используйте режим Expert. Я очень люблю его применять для того, чтобы сконвертированный шрифт содержал только необходимые мне символы (это можно настроить в разделе Subsetting). Тем самым можно неплохо сократить размер файла.

Единственная проблема FontSquirrel в том, что некоторые шрифты внесены в «чёрный список» по просьбе правообладателей, и вы не сможете получить их веб-версии (например, Segoe UI, Myriad Pro и другие).

В этом случае вам помогут другие webfont-генераторы. Не такие удобные, но всё же.

Online Font Converter

Мой любимый сервис, после FontSquirrel. Online Font Converter постоянно совершенствуется, и на момент написания статьи обладал простым интерфейсом, создать веб-шрифт в котором — сущие пустяки. Минус конвертера в том, что он не имеет настроек. Зато поддерживает множественную загрузку и конвертирует абсолютно любые шрифты, если вы понимате о чём я =)

Этот сервис тоже создаёт качественный webfont, который отображается как оригинал.

Другие сервисы

Если вдруг двух перечисленных конвертеров вам мало, можете попробовать Everything Fonts или Web Font Generator. Эти инструменты очень похожи и имеют одинаковые недостатки: только один файл на загрузку и отсутствие настроек. Хотя рендеринг у них неплохой, да и всеядность имеется.

Конечно, это не полный список, но другие сервисы не дадут вам чего-то большего, чем перечисленные.

Нет времени разбираться? Закажите вёрстку сайта у меня =)