Перейти к основному содержанию
Иконка домой

Typekit vs Google Webfonts

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

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

Google webfonts

Бесплатный сервис google.com/webfonts служит для предоставления шрифтов вебразработчикам. Содержит в себе только бесплатные варианты шрифтов. Общее число 573, но с поддержкой русского языка их всего 43. При этом что странно, некоторые шрифты, которые изначально имеют поддержку русского языка, на сервере представлены без нее (к примеру шрифт Droid Sans).

google-webfonts

google-use

Шрифты можно подключать тремя способами:

  1. Использование внешнего css-файла, загружаемого с сервера google. (используется по умолчанию)
<link href='http://fonts.googleapis.com/css?family=Playfair+Display+SC:400,400italic,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
  1. Использование директивы @import в css-файле
  2. Использование javascript

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

Плюсы сервиса:

  1. Бесплатность
  2. Высокая скорость загрузки и доступность серверов

Минусы сервиса:

  1. Ограниченное число шрифтов, и все шрифты только свободные
  2. JS-код для подключения слишком объемный
  3. Малое число шрифтов с поддержкой русского языка
  4. Шрифты в некоторых начертаниях отображаются несколько иначе, чем их исходный вариант

Typekit

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

typekit-webfonts

typekit-use

Всего шрифтов на сервере Typekit – 783, но с поддержкой русского языка 92. Для подключения используется JS-скрипт, который генерируется отдельно для каждого проекта.

<script type="text/javascript" src="//use.typekit.net/sux8vth.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

typekit-editor

Плюсы сервиса:

  1. Большое число доступных шрифтов, в том числе с поддержкой русского языка
  2. Высокая скорость загрузки, распределенная сеть серверов по всему миру
  3. Очень удобный интерфейс сервиса. Довольно просто можно подобрать требуемый шрифт и встроить его в нужный проект
  4. Простота подключения шрифта к странице
  5. Есть возможность указания правил css для элементов, которые будут использоваться на сайте

Минусы сервиса:

  1. Платность (если, конечно можно отнести к отрицательным моментам)
  2. Нет некоторых распространенных шрифтов, типа georgia, helvetica из-за лицензионных ограничений [источник ]. Приходиться использовать их альтернативы

Итоги

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

Стоит только помнить о том, что использование русских символов в шрифтах увеличивает их объем почти в три раза. Что будет сказываться на скорости загрузки страниц сайта.