Прежде чем нарезать макет и расставлять блоки хорошей идеей будет разобраться со шрифтами, чтобы потом уже не отвлекаться на них. Этой теме будет посвящено три статьи. В первой разберём работу с FontAwesome, во второй – подключение через GoogleFonts, в третьей с помощью FontSquirrel.

Обзор используемых шрифтов

Adobe Extract подсказывает, какие шрифты и с какими начертаниями нам потребуются.

фото 1

  • Source Sans Pro – обычный, светлый, полужирный, жирный;
  • Font Awesome;
  • Gotham – светлый, жирный, тёмный;
  • Gotham Light – обычный;
  • Open Sans – обычный.

В этой статье мы рассмотрим подключение всем хорошо известного Font Awesome. Это иконочный векторный шрифт, который изначально разрабатывался под Bootstrap, но со временем получил огромное распространение. Обычно он используется для иконок соцсетей, логотипов известных брендов, стрелок направления, элементов веб-форм и многого другого. Типичный пример иконок на сайте выглядит так.

фото 2

Преимущества этого шрифта:

  • Не требуется javaScript.
  • Бесконечная масштабируемость.
  • Совместимость с retina-дисплеем.
  • Совместимость с html-фреймворками.
  • Удобное управление через CSS.
  • Узнаваемость пользователями.

Подключение Font Awesome

Способ 1. Подключение через CDN

Это самый простой способ, при котором сайт будет каждый раз для вызова шрифта обращаться к сторонним ресурсам. Для этого переходите сюда.

фото 3

Вводите ваш e-mail, жмёте на большую зелёную кнопку и получаете ссылку. Её нужно просто вставить в шапку сайта между тегам. Всё, иконочный шрифт можно использовать.

Способ 2. Скачивание библиотеки

Лично мне больше нравится, когда все ресурсы, необходимые для работы сайта лежат под рукой, и их не приходится каждый раз дёргать с какого-то удалённого сервера. Поэтому я предпочитаю второй способ, с полным скачиванием библиотеки. Порядок действий такой.

1. Идёте на ту же страницу, проматываете вниз и нажимаете большую серую кнопку «Скачать». Нам предложат выбрать 4 или 5 версию. Выбираем 4, она практически с такими же возможностями, зато бесплатная.

фото 4

2. Полностью распаковываем архив в нашу папку Fonts, которая лежит в корне проекта. Нам нужны только папки css и fonts, остальное удаляем.

3. Подключаем стиль в шапке сайта, вставляя между тегами такую строку:

<link rel="stylesheet" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">

Можно пользоваться.

Использование Font Awesome

Базовые иконки

Для вывода иконки достаточно добавить к имени класса префикс fa и название иконки. Желательно для этого использовать строковые элементы, такие, как i или span.

Пример. Вставляем в html-код такую строку:

<i class="fa fa-twitter"></i>твиттер

В результате получаем:

твиттер

Полный список иконок можно посмотреть здесь.

Увеличенный размер

Для увеличения размера добавляются классы fa-lg, fa-2x, fa-3x, fa-4x и fa-5x.

Пример:

<i class="fa fa-calculator fa-lg"></i> fa-lg
<i class="fa fa-calculator fa-2x"></i> fa-2x
<i class="fa fa-calculator fa-3x"></i> fa-3x
<i class="fa fa-calculator fa-4x"></i> fa-4x
<i class="fa fa-calculator fa-5x"></i> fa-5x

Результат:
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

Иконки списков

Font Awesome позволяет заменить стандартные маркеры в списках. Для этого используются классы fa-ul и fa-li.

Пример:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>Иконки списков</li>
  <li><i class="fa-li fa fa-check-square"></i>могут быть использованы</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>как маркеры</li>
  <li><i class="fa-li fa fa-square"></i>в списках</li>
</ul>

Результат:

  • Иконки списков
  • могут быть использованы
  • как маркеры
  • в списках

Как видите, процесс этот может быть не очень простым, так как стили иконочного шрифта вступают в конфликт с основными стилями сайта. Решать эту проблему в рамках данной статьи мы не будем, поскольку придётся затрагивать приоритеты классов в css.

Иконки с фиксированной шириной

Часто используется для создания линеек со ссылками на соцсети. Для этого достаточно добавить класс fa-fw.

Пример:

<i class="fa fa-facebook fa-fw fa-2x"></i><i class="fa fa-twitter fa-fw fa-2x" ></i><i class="fa fa-linkedin fa-fw fa-2x"></i><i class="fa fa-pinterest-p fa-fw fa-2x"></i><i class="fa fa-google-plus fa-fw fa-2x"></i>

Результат:

Анимированные иконки

Иконки можно заставить вращаться, для чего служат два класса fa-spin подключает простую анимацию, а fa-pulse, чтобы заставит вращаться иконку по 8 шагам. Самое очевидное использование – на страницах загрузки. Отображается не на всех браузерах.

Пример:

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Загрузка...</span>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Загрузка...</span>

Результат:


Загрузка…

Загрузка…
Заключение

Итак, мы подключили иконочные шрифты Font Awesome и научились с ними работать. Теперь самое время заняться остальными шрифтами.