Картинка на базовій лінії шрифта: jsFiddle

Мінусові маргіни (колесов, ресайз паддінг, сині лінії з мінусовими маргінами): jsFiddle

Підключення шрифтів

Підключення зовнішніх шрифтів з Google Fonts

Часто в макеті використовуються нестандартні шрифти, які відсутні у більшості користувачів інтернету, або взагалі - фірмовий шрифт.

В першу чергу перевірте наявність шрифта на сервісі Google Fonts. Часто використовують шрифт Open Sans, зробіть пошук "google fonts Open Sans" і за першим посиланням потрапите на сторінку потрібного шрифта.

Google fonts search
Пошук шрифта в сервісі Google Fonts

На цій сторінці потрібно вибрати "Select this font".

Google fonts Open Sans
Вибираємо потрібний нам шрифт

Знизу праворуч з'явиться плашка, при кліку на яку можна переглянути як використовувати шрифт та налаштувати його:
  1. Різні види накреслення.
  2. Набір символів для різних мов.
  3. Тег <link>, який необхідно вставити в заголовок <head> для підключення шрифта.
  4. Приклад застосування шрифта у стилях.

Google fonts Open Sans
Підказка по застосуванню шрифта на своїй сторінці
Google fonts Open Sans
Налаштування шрифта

Підключення зовнішніх шрифтів з файлів

Якщо у макеті використовується фірмовий, комерційний чи малорозповсюджений шрифт - його необхідно сконвертувати у формати веб-шрифтів і підключити їх.

Для конвертування є зручний інструмент FontSquirrel. Цей сервіс готує повний пакет зі шрифтів і CSS-файлів. Якщо він відмовиться конвертувати - доведеться робити це вручну.

Скористайтесь одним з онлайн-конверторів, наприклад, CloudConvert. Загружаємо по черзі наші файли шрифтів, обираємо для конвертування формати: woff, eot, svg.

Перевірте за допомогою сервіса Can I Use.com підтримувані формати шрифтів різними браузерами. Можливо, вам не знадобляться всі формати файлів, а лише 1-2.

Після того, як отримаєте всі файли - скопіюйте їх у каталог fonts. Сюди ж можна помістити і файл стилів з підключенням шрифта:

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

Але краще підключати шрифти у своїй CSS, скопіюйте код підключення і вставте в самий початок файлу стилів. При цьому необхідно вказати шлях до файлів шрифтів:

src: url('../fonts/opensans.woff');

Наразі всі браузери підтримують шрифт woff, тому підключення можна скоротити:

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/opensans.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

Зверніть увагу! Коли підключаєте файл SVG - через решітку у імені файла необхідно вказати id шрифта:

SVG font id
ID шрифта в файлі SVG

Шрифт QuickSand з декількома накресленнями.

Якщо підключаєте декілька шрифтів з одним іменем та різним накресленням, наприклад, Open Sans Regular і Open Sans bold (їх імена відповідно open_sansregular і open_sansbold), то їх логічно підключити одним іменем, але різними стилями:

@font-face {
  font-family: 'Open Sans';
  src: url('opensans.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url('opensans.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

Після чого шрифт можна використовувати на сайті:

body { font: normal 18px/1.3em "Open Sans", Helvetica, Arial, sans-serif;}
h1 { font-family: "Open Sans", Helvetica, Arial, sans-serif;}

Youtube: HTML Шорти - Сторонні шрифти (7:16).

Іконочні шрифти

У великих проектах часто використовуються десятки іконок різних кольорів, розмірів, з використанням hover- та active-ефектів. В таких випадках доцільно підключити один з іконочних шрифтів та використовувати іконки як букви шрифта.

Приклади іконочних шрифтів:

Як правило, іконки в верстку вставляються тегом <i>, якому прописують один чи два класи. Самі іконки вставляються псевдоелементом :before.

Дослідіть стилі іконок на представлених сайтах.

Додаткові матеріали

Розмір файлів шрифтів можна зменшити прибравши з нього зайві символи (або прописати тільки потрібні символи), те саме можна зробити і на FontSquirrel.

Щоб швидко розібратися в шрифтах - почитайте статті про шрифти, про параметри шрифтів, про те, які шрифти хороші, якісні, а які зроблені аби як.

Також пройдіть тест на кернінг.

Домашнє завдання

  1. В макеті Minecraft задайте всій сторінці шрифт OpenSans.
  2. Активному пункту меню та hover-ефекту задайте жирність 800, решті пунктів - bold. Порівняйте шрифти.
  3. Телефонам задайте жирність 300.
  4. Заголовок h1 і текст новин зробіть шрифтом Scada.
  5. Бокове меню зробіть шрифтом Lobster.
  6. В макеті Iskander підключіть шрифт Scada до всієї веб-сторінки.
  7. Створіть новий проект, підключіть до нього шрифти fontawesome і ionicons. Вставте на сторінку по десятку іконок з кожного шрифта. Задайте їм різні стилі, колір, ховер-ефект.