Генератор шрифтов Fontello



Влад Мержевич

После написания статьи об использовании символов UTF в качестве иконок для дизайна, в комментариях мне посоветовали обратить внимание на сервис Fontello. Он автоматически собирает шрифт, содержащий только выбранные пользователем символы. Напомню для начала, в чём плюсы и минусы такого подхода по сравнению с теми же изображениями.

Плюсы

  • символы можно масштабировать как угодно, они не теряют своего качества;
  • занимают мало места;
  • к символам применимы стилевые свойства вроде изменения цвета, фона, добавления тени, повороты и др.;
  • символы легко добавлять практически к любому элементу через псевдоэлементы ::before и ::after.

Минусы

  • символы одноцветные;
  • могут несколько различаться в разных операционных системах;
  • символы не ко всем элементам можно добавить;
  • нельзя отредактировать на свой вкус.

Сервис Fontello действует довольно просто: вы отмечаете символы, которые вам нравятся, и нажимаете кнопку «Download webfont» (рис. 1).

Fontello с выбранными шрифтами

Рис. 1. Fontello с выбранными шрифтами

Внутри скачанного архива содержится шрифт fontello в четырёх разных форматах: ttf, svg, eot и woff. Это гарантирует, что в любом браузере, даже устаревшем, какой-то из них будет обязательно работать. Здесь же лежит demo.html, показывающий работу символов в качестве иконок и куча стилевых файлов на все случаи жизни. Некоторые, к примеру, нужны для работы IE7, который не понимает свойство content, а без него у нас возникают сложности с выводом иконок. Впрочем, будем оптимистично считать, что время IE7 уже позади и им никто в зрелом рассудке пользоваться не станет. Так что ориентируемся на современные браузеры, а здесь всё просто.

Нам требуется две вещи: папка font целиком, она, напомню, хранит четыре шрифтовых файла в разном формате, и коды символов. Их можно посмотреть в файле fontello.css или на сайте во вкладке «Customize Codes» (рис. 2).

Код символов

Рис. 2. Код символов

Можно пойти и более простым путём и просто подключить файл fontello.css к сайту или скопировать содержимое в свой CSS и отредактировать по своему желанию.

Добавление иконок через стили делается в три этапа. Стиль я взял напрямую из fontello.css без дополнительного редактирования.

1. Подключаем файл шрифтов

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?31919061');
  src: url('../font/fontello.eot?31919061#iefix') format('embedded-opentype'),
  url('../font/fontello.woff?31919061') format('woff'),
  url('../font/fontello.ttf?31919061') format('truetype'),
  url('../font/fontello.svg?31919061#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

Здесь важно правильно указать путь к шрифтам относительно CSS-файла. Браузеры из этого набора выберут и загрузят пользователю тот шрифт, который они понимают. В табл. 1 показано какие браузеры что «любят».

Табл. 1. Поддерживаемые форматы
Формат Internet Explorer Chrome Opera Safari Firefox Android iOS
TTF 9.0+ 4.0+ 10.0+ 3.1+ 3.5+ 2.2+
EOT 5.0-8.0
WOFF 9.0+ 5.0+ 3.6+
SVG 1.0+ 9.0+ 3.1+ 3.5+ 1.0+

2. Для элемента, где будет использоваться иконка, устанавливаем шрифт fontello.

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
}

Иконки мы будем определять через класс icon-*, поэтому такая запись говорит применить стилевые правила ко всем элементам, у которых класс начинается на icon- или icon- встречается в середине. Это на случай, если добавляется несколько классов одновременно. Плюс указывается псевдоэлемент :before, именно через него выводится символ.

3. Выводим символы по их коду через свойство content, работающее в связке с :before.

.icon-search:before { content: '\e803'; } 
.icon-left-open-big:before { content: '\e801'; }
.icon-right-open-big:before { content: '\e802'; }
.icon-chart-line:before { content: '\e800'; }

Теперь как это использовать. К любому элементу, где нужно показать иконку, добавляем класс с её именем, например, так.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Иконки</title>
  <style>
   @font-face {
    font-family: 'fontello';
     src: url('fonts/fontello.eot');
     src: url('fonts/fontello.eot') format('embedded-opentype'),
          url('fonts/fontello.woff') format('woff'),
          url('fonts/fontello.ttf') format('truetype'),
          url('fonts/fontello.svg') format('svg');
    font-weight: normal;
    font-style: normal;
   }
   [class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
   }
   .icon-search:before { content: '\e803'; } 
   .icon-left-open-big:before { content: '\e801'; }
   .icon-right-open-big:before { content: '\e802'; }
   .icon-chart-line:before { content: '\e800'; }
  </style>
 </head>
 <body>
  <button><i class="icon-search"></i></button>
 </body>
</html>

В данном примере делается кнопка с иконкой.

Резюме

Сервис Fontello позволяет использовать только выбранные иконки, что существенно сокращает объём загружаемого файла шрифтов. У меня он получился менее 5 Кб и содержал четыре иконки. Объём шрифтов сравним с подобными картинками, файлы которых после оптимизации будут занимать примерно столько же или даже больше. Преимуществом же символов является их масштабируемость и вариабельность — мы можем использовать один и тот же символ множество раз с разными стилевыми параметрами.

В целом, если вам по дизайну подходят предлагаемые иконки, то Fontello надо задействовать обязательно.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.