Сравнение сервисов шрифтов Google Font, Typekit и @font-face

admin

9 лет назад

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

CSS3 @font-face

Свойство @font-face было впервые предложено в CSS2 и внедрено в браузере Internet Explorer с версии 5. Однако эта реализация основывалась на закрытом формате Embedded Open Type (.eot), и другие браузеры не использовали этот формат до выхода Safari 3.1.

CSS

@font-face {
  font-family: '3DumbRegular';
  src: url('3Dumb-webfont.eot');
  src: local('?'), url('3Dumb-webfont.woff') format('woff'), url('3Dumb-webfont.ttf') format('truetype'), url('3Dumb-webfont.svg#webfont57ztNrX6') format('svg');
}
h1 {
  font-family: '3DumbRegular', Arial, sans-serif
}

Плюсы

Можно выбирать из большого количества шрифтов. Полный список можно посмотреть здесь.
Работает во всех браузерах.
Не нуждается в JavaScript.

Минусы

Несколько дольше внедрять, чем Google Font API, так как больше кода.
Качество отображения шрифтов может быть разным у разных браузеров.
Проверка кода CSS может не пройти, в зависимости от тега DOCTYPE.
Не очень широкий выбор бесплатных русских шрифтов.

Google Font API

Чтобы использовать шрифты из библиотеки Google, просто пройдите по ссылке и выберите шрифт. Например, если вы выбрали шрифт «Cantarell», вам нужно добавить следующий код в ваши файлы.

HTML

<link href="http://fonts.googleapis.com/css?family=Cantarell&subset=latin" rel="stylesheet" type="text/css">

CSS

h1 {
  font-family: 'Cantarell', arial, serif; /*Add also some font replacements, just in case...*/
}

Плюсы

Бесплатное решение от Google.
Быстрая настройка.
Не нуждается в JavaScript.
Не нужно думать о лицензировании шрифтов.

Минусы

Ограниченный выбор шрифтов, очень мало русских шрифтов. Надеемся, что это временно.
Качество отображения шрифтов может быть разным у разных браузеров.
Нет поддержки для старых версий iPhone и iPad, поддержка была добавлена начиная с iOS 4.2+ для iPhone, iPad, iPod.

Typekit

Typekit — это сервис, запущенный компанией Small Batch, позже выкупленный компанией Adobe, который по средствам сервиса платной подписки позволяет веб-разработчикам и веб-дизайнерам использовать нестандартные, не зависящие от системы шрифты в интернет-приложениях. Этот сервис использует свойство CSS @font-face и JavaScript.

HTML

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

CSS

h1 {
  font-family: "museo-sans-1", "museo-sans-2", sans-serif;
}

Плюсы

Очень большая библиотека шрифтов.
Хорошо поддержан документацией.
Поддержка iPad, iPhone/iPod Touch.
Можно выбрать, как будет выглядеть Ваша страница до загрузки шрифтов.

Минусы

Это платный сервис, но у него также есть бесплатная версия.
Зависит от JavaScript, добавляет запрос HTTP.
Неудобно выбирать русские шрифты, нет возможности увидеть, как они выглядят, до выбора шрифта.

Другие сервисы шрифтов

Заключение

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

Автор урока Catalin Rosu

Перевод — Дежурка