Начнем с поддержки нестандартных шрифтов разными браузерами. Как известно, не все браузеры поддерживают шрифты формата TrueType. Я решил собрать информацию о поддержке форматов шрифтов различными браузерами в небольшую табличку.
| eot | woff | ttf | svg |
|---|---|---|---|
| • IE ниже версии 9 • Полный список |
• IE выше версии 8 • Mozilla Firefox • Google Chrome (PC) • Safari (PC) • Полный список |
• Все браузеры кроме IE любой версии • Полный список |
• Google Chrome (PC, Mobile) • Safari (PC, Mobile) • Полный список |
Нестандартные шрифты для сайта доступны во многих источниках в Интернете. Я выбрал несколько известных источников и охотно поделюсь ими с читателем.
- Google Web Fonts — бесплатный и надежный сервис от компании Google. На нем представлены только бесплатные некоммерческие шрифты. Способы их использования ничем не ограничены, можно использовать шрифты не только в личных, но и коммерческих целях: например, на собственном блоге и на сайте своей компании. Не возбраняется применять их при печати. Кириллических шрифтов в каталоге немного.
- TypeKit — пробный вариант: можно использовать только 2 шрифта, только на одном сайте. Есть ограничения по показу страниц – 25.000 показов в месяц. Платный аккаунт: от 25 USD за год. Чтобы пользоваться сервисом необходимо зарегистрироваться. Можно авторизоваться на сервисе с помощью Adobe ID.
- Fonts.com — бесплатный аккаунт: возможность выбора из 3.000 различных шрифтов с ограничением по количеству показа страниц – до 25.000 показов в месяц. На сайте обязательно разместить небольшой баннер, сообщающий о том, что вы используете сервис fonts.com. Платный аккаунт: от 8 EUR за месяц за возможность использования 20.000 шрифтов. Для использования сервиса необходима регистрация. Кириллических шрифтов в каталоге немного.
- Font Squirrel — каталог, содержащий бесплатные шрифты для сайта. Среди шрифтов большое количество кириллических. Из каталога Font Squirrel можно загрузить файлы шрифтов в форматах TTF и OTF. И самое главное, на сайте доступен инструмент Webfont Generator. С его помощью загруженный посетителем шрифт преобразуется в различные форматы. Благодаря чему он корректно работает в различных браузерах. Webfont Generator очень заинтересовал меня, наличие его на сайте Font Squirrel выгодно отличает его от всех сервисов, перечисленных выше.
Я решил более детально остановиться на этом инструменте и описать порядок работы с ним. В работе с Webfont Generator существует ряд ограничений, ознакомиться с которыми можно на странице FAQ. Они связаны с лицензированием шрифтов и техническими моментами.
Итак, давайте сгенерируем шрифты различных форматов на примере шрифта ’Bravo RG’. Это бесплатный шрифт, который вполне подойдет для использования на сайтах. Шрифт можно загрузить со страницы http://www.1001fonts.com/bravo-font.html. Там же можно ознакомиться с лицензией и условиями использования.
После загрузки архива и извлечения шрифтов из него, перейдем на страницу http://www.fontsquirrel.com/tools/webfont-generator. Добавим шрифт для генерации. Для этого нажмем кнопку “Add Fonts” и укажем путь к файлу.
Перейдем к экспертным настройкам.
В разделе “Subsettings” отметим “Custom subsettings (Custom language support)”.
В появившемся списке в блоке “Language” выбираем “Cyrillic”.
Затем соглашаемся с условиями того, что лицензии шрифтов, которые мы загружаем позволяют использовать их в сети.
После всех выше описанных действий, в форме станет доступна кнопка “Download your kit”, при клике на нее скачивается сгенерированный Webfont Generator’ом набор шрифтов в архиве. Кроме самих шрифтов, мы получаем веб-страницу с инструкцией по использованию шрифта на своем сайте. Кроме того, на странице продемонстрировано как будет выглядеть шрифт на веб-странице в абзацах, заголовках и врезках. На отдельной вкладке представлены все символы, которые включены в шрифт. В файле stylesheet.css находится CSS-код для подключения шрифтов. Его можно скопировать и вставить в CSS-файл вашего сайта, не забыв при этом поменять в правилах пути к шрифтам на свои.
Вот такой полезный инструмент, позволяющий генерировать в том числе и русские шрифты для сайта, доступен для разработчиков на сайте Font Squirrel. Лично я внес его в закладки своего браузера и планирую пользоваться им при необходимости в будущем.
Я подготовил небольшой видеоролик, в котором показано, что нужно сделать, чтобы конвертировать шрифт, используя Webfont Generator.