Генератор @font-face від Font Squirrel проти Google WebFonts

Роман Кокарев

Стаття з сайту PHP Junior з дозволу автора.

Останні два роки веб-розробки виник тренд: використання індивідуальних шрифтів не лише в заголовках, меню і шапці (за допомогою Cufon або зображень), але також по всьому контенту. Arial, Verdana, Times New Roman наситили очі протягом десятків років, і людям захотілося чогось новенького — хоча б з того часу, як браузери почали це дозволяти.

Ця стаття розгляне два найвідоміших веб-сервіси, які допомагають вбудовувати шрифти в HTML-верстку:

У Інтернеті є два найзручніших сервіси для вбудовування шрифтів на сторінку: відомий Google WebFonts (про який уже багато розказано), а також Font Squirrel @font-face Generator, про який саме йтиметься в цій статті.

Почнемо з короткого огляду.

Google Web Fonts

Це дійсно чудовий сервіс. Як відомо, Google ніколи не робить поганої роботи, і тут вони знову — найкращі. Достатньо вибрати потрібні вам шрифти (скоріш за все, вони з'являться, коли ви натиснете на перемикач Cyrillic). Вбудувати дуже просто:

  1. Через елемент <link>. Рядок матиме приблизно наступний вигляд.
    <link href=’http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic’ rel=’stylesheet’ type=’text/css’>
  2. Через правило @import. Такий рядок вставляємо в свій CSS-файл у самому верху.
    @import url(http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);
  3. Через JavaScript.

Просто і зі смаком. Усі шрифти для різних версій браузерів визначаються та вбудовуються автоматично.

Тепер про недоліки:

  1. Часто при першому завантаженні сторінки текст на ній зникає, і з'являється лише тоді, коли завантаження шрифта з CDN Google буде завершено.
  2. Мало шрифтів у колекції, особливо кириличних. В основному це вільні шрифти, а ми часто потребуємо найсмачніші.
  3. Залежність від Google. Якщо завтра вони видалять шрифт з колекції, то на вашому сайті просто зникне текст. Не круто.
  4. У країнах, де будь-які сервіси гугла знаходяться під забороною (наприклад, в Казахстані), ваш текст може дуже довго завантажуватися, і в результаті користувач може або не побачити текст, або побачити просто зламану верстку. Зараз ситуація з цим полегшилася, але нещодавно було саме так.

Font Squirrel @font-face Generator

Дуже зручний сервіс для вбудовування шрифтів та їх автоматичної конвертації (!) у формати TrueType, WOFF, EOT Lite, EOT Compressed та SVG. Чудовий набір, чи не так? Завдяки цьому сумісність з різними браузерами (і різними версіями браузерів) збільшується на 100%.

Отже, переваги цього сервісу (їх багато):

  1. Можливість завантажити будь-який потрібний вам шрифт. Це можуть бути навіть якісь графічні елементи, переведені у вигляд TTF-шрифта, які ви хочете використовувати для елементів навігації на своїй сторінці.
  2. Автоматична безпомилкова конвертація в будь-який формат з більшості відкритих і закритих стандартів шрифтів (виключаючи, можливо, .fon та інші специфічні шрифти початку 90-х: TrueType, WOFF, EOT, OpenType.
  3. Багато тонких налаштувань.
  4. Ймовірність, що ваш шрифт буде виглядати однаково в більшості сучасних версій браузера, дуже висока — все ж ви можете встановити власні налаштування. Наприклад, використовувати параметр X-Height Matching, щоб ваш шрифт за висотою був приблизно схожий з Times New Roman, наприклад (піксельхантери не сплять).
  5. Можете заборонити використання шрифта на комп'ютері, використовуючи властивість WebOnly™ Protection.
  6. Вбудувати свої шрифти прямо в CSS за допомогою Base64 Encode — це зменшить кількість запитів до сервера і позитивно скажеться на зменшенні його навантаження.
  7. Можливість вибору саме тих локалей, які вам конкретно будуть потрібні (це дозволить зменшити розмір файлів).

Недоліки:

  1. Складність налаштувань. Їх дійсно дуже багато, і досить легко в них заплутатися, особливо для неангломовного користувача.
  2. Остаточне вбудовування на сторінку не настільки тривіальне, як у Google WebFonts.

Тепер підсумуємо:

  1. Google WebFonts: надзвичайна простота використання, але наразі мало шрифтів і деякі проблеми через те, що шрифти зберігаються на CDN Google.
  2. Font Squirrel @font-face Generator: можливість завантажити власний шрифт, зменшити його розмір та сумісність, велика кількість налаштувань, але в той же час, складність їх правильної настройки для простого користувача.

Особисто я в 90% випадків використовую Font Squirrel @font-face Generator, але, якщо ви задаєтеся питанням "як вбудувати Open Sans на свою сторінку" — не партеся і використовуйте Google WebFonts.

шрифти
SEO текст: Учимося вбудовувати індивідуальні шрифти на веб-сторінки. Дізнайтеся про Google WebFonts та Font Squirrel @font-face Generator. Переваги та недоліки кожного сервісу. Кращий спосіб вбудовування шрифтів залежить від вашої задачі.

Часті запитання