Используем нестандартные шрифты на сайте

Описание: Программирование в HTML
Модератор: Aleksandr

LILUS M
Автор темы, Старшина
Старшина
Аватара
LILUS M
Автор темы, Старшина
Старшина
Сообщения: 136
Зарегистрирован: 2 мая 2013
С нами: 10 лет 10 месяцев

#1 LILUS » 31 января 2014, 18:38

Tue, 17 Dec 2013 17:26:42 +0400

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



Начнем с поддержки нестандартных шрифтов разными браузерами. Как известно, не все браузеры поддерживают шрифты формата TrueType. Я решил собрать информацию о поддержке форматов шрифтов различными браузерами в небольшую табличку.












eotwoffttfsvg
• 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.




Вернуться в «HTML»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 1 гость