Встраиваем шрифты при помощи Font Squirrel @font-face Generator

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

У попередній статті "Font Squirrel @font-face Generator vs Google WebFonts" я розглянув два популярні сервіси для вбудовування шрифтів у розмітку, і обіцяв розкрити секрети їх використання в наступній статті.

Припустимо, що дизайнер використав у своєму макеті дуже модний, найпопулярніший вивісочний шрифт MyriadPro від Adobe. У Google WebFonts його немає, хоча б через те, що Adobe не зробила його вільним.

Але задача стоїть, і тепер до справи. Ви задумались, як вбудувати MyriadPro у розмітку.

Ідемо сюди і бачимо таку картину:

Додаємо свій шрифт або шрифти (у нас це буде Myriad Pro Regular) і обираємо режим "Expert".

Можемо обрати формати шрифтів - рекомендую залишити все як є - це працює, принаймні, на всіх сучасних версіях браузерів.

Далі:

Обираємо Custom Subsetting. Це потрібно для того, щоб обрати саме ті діапазони символів (символи мови), які нам потрібні. Ймовірно, нам потрібні "English", "Cyrillic", і іноді я додаю "Deutch". Також я додаю те, що на знімку екрану - насправді ніколи не знаєш, які символи ще можуть знадобитися, і повторювати цю процедуру вдруге (разом з інтеграцією) не особливо хочеться.

Далі перевіряємо таблицю символів, яку буде використовувати наш шрифт:

Кирилиця є? Чудово. Переходимо до наступного кроку:

Ми можемо вбудувати свої шрифти прямо в CSS за допомогою Base64 Encode (всі сучасні браузери підтримують цей фінт у вуха). Це позитивно позначиться на зниженні навантаження на сервер (зменшиться кількість обгортань до нього), а також на швидкості завантаження сторінки.

Також можна змінити ім'я отриманого CSS та додати ще різних опцій, що можуть збільшити розмір файлу і на практиці не дуже потрібні.
Решту не доторкаємося - воно того не варте.

Лжемо про те, що цей шрифт дозволено використовувати в Інтернеті (а насправді - лише в макетах .PSD, судячи по EULA Adobe) і отримуємо zip-файлик.

У ньому ми побачимо файл "ім'яшрифта-demo.html" - відкриваємо і бачимо гарну таблицю з нашими шрифтами. Для перевірки нашої кирилиці переходимо на "Glyphs & Languages", пролистовуємо ближче до кінця сторінки.

Перевіряємо в усіх сучасних браузерах: Chrome, Firefox, Internet Explorer 9, Opera та Safari. Кирилиця є? Чудово.

А тепер вбудуємо все це у CSS (див. у файлі stylesheet.css), і скопіюємо у нашу папку файли шрифтів - на всякий випадок:

Тепер дивимося результат:

Працює. Все дуже просто і гарно.