Матвей Земсков

Заметки веб-мастера

Вторник, 17 декабря 2013 16:55

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

Оцените материал
(2 голосов)

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

Начнем с поддержки нестандартных шрифтов разными браузерами. Как известно, не все браузеры поддерживают шрифты формата 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.

Прочитано 9446 раз
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх