Підключення сторонніх шрифтів
Last updated
Last updated
На вебсторінці можуть бути використані шрифти, які не встановлені у системі, але необхідність їх відтворення поставлена в технічному завданні. Для цього потрібно ці шрифти під'єднати до проєкту.
У сучасній розробці шрифти можна підʼєднати за допомогою сервісу і брати їх з віддаленого сервера google або можна помістити файли шрифтів у себе в проєкті та під'єднати їх у файлі CSS. У кожного з таких підходів є як переваги, так і недоліки. Обирати спосіб треба в залежності від поставленого завдання.
Слід також памʼятати, що не всі шрифти безплатні. Деякі необхідно купувати і їх використання без дозволу може наробити чимало проблем. Тому зверніть увагу на це і віддавайте перевагу безплатним шрифтам - їх дуже багато на будь-який смак. Якщо ви маєте готовий макет від дизайнера, то ймовірно це питання вирішене, але не завадить уточнити.
Цей сервіс містить велику кількість безплатних шрифтів. Щоб підʼєднати їх до проєкту нема потреби викачувати файли. Потрібно вибрати всі використовувані шрифти та кількома рядками підʼєднати їх в html-файлі.
Перевага: це спрощує підʼєднання шрифту до проєкту та інколи пришвидшує завантаження шрифтів у клієнта.
Недолік: Це сторонній сервіс. Google хоч і надійна компанія, але ви не застраховані від випадкових збоїв. Крім того, у розробці деяких проєктів (особливо через систему безпеки) вимагається в ТЗ не використовувати сторонні сервіси.
Утім Google Fonts - дуже надійний сервіс і його використовують у багатьох проєктах.
Порядок підключення шрифтів за допомогою Google Fonts:
Перейдіть на сторінку і в полі пошуку введіть назву шрифту. Вам буде показано збіги за запитом.
Виберіть бажаний шрифт (Наприклад як в прикладі вище Dancing Script). І на сторінці цього шрифту за допомогою іконки плюсика оберіть всі жирності написання шрифту, які використанні в проєкті. У тім не треба обирати ті, яких нема в проєкті, бо це збільшуватиме час завантаження шрифтів в проєкті. Ви побачите, що шрифти додалися в обрані.
Таким само чином можна обрати й інші шрифти знайшовши їх в пошуку. Головне підключати шрифти не кожен окремо, а всі разом.
Після того, як всі необхідні шрифти обрані, можна підключати шрифти до проєкту. Можна обрати підключення через <link> в html-документі, або через імпорт в css.
Якщо обрати <link>, то вказаний код копіюють і вставляють всередині елемента <head>, але перед підключенням файлів стилізації СSS.
Якщо обрати @import, то треба вказаний код просто вставити на самому початку файлу зі стилями.
Тут уже і є підказка як прописувати font-family в css-файлі.
Якщо підʼєднати шрифти вищезазначеним способом, то в інструментах розробника ми можемо побачити як саме відбувається підʼєднання цих шрифтів.
Для цього зайдемо: Інструменти розробника ->Network->CSS->Preview
По суті тут ми отримали звичайний css-файл і використовуємо директиву @font-face у якій описані наші шрифти, які ми підʼєднуємо.
Розберемо ці налаштування:
font-family - локальна назва шрифту, як ми її будемо використовувати у нашому файлі стилів.
font-style - тип накреслення символів (звичайний(normal), курсив(italic)...).
font-weight - жирність шрифту.
font-display - налаштування керування під час завантаження шрифту. swap означає, що браузер відразу малює текст безпечним шрифтом і користувач не бачить порожнього екрана, очікуючи завантаження шрифту. Але коли шрифт завантажиться, він одразу заміниться.
src - посилання на файл шрифту. Зазвичай розширення файлів ttf, woff або woff2.
Тепер за таким принципом, використовуючи директиву @font-face можна в проєкті локально підʼєднати шрифти. Файли шрифтів надає дизайнер, або їх можна завантажити на сторінці Google Fonts.
Якщо розпакувати архів, то ми побачимо всі файли шрифтів обраного сімейства.
Шрифти можна перекопіювати у теку нашого проєкту, наприклад в теку fonts. І тепер підʼєднати кожен необхідний шрифт у самому початку в нашому файлі стилів за схемою описаною вище.
Розглянемо порядок підʼєднання і використання цього плагіну:
Встановлюємо плагін натиснувши у програмі Figma у верхньому лівому куті стрілку меню.
Figma Menu -> Plugins -> Manage plugins...
Після цього шукаємо Font Fascia і встановлюємо його. (На зображенні він вже встановлений)
Відкриваємо проєкт і додаємо його собі в чернетки (drafts)
Створиться ваша копія проєкту.
Тепер в тому ж верхньому лівому меню обираємо плагін Font Fascia
Figma Menu -> Plugins -> Font Fascia
Тепер плагін покаже всі застосовані шрифти і їх кількість в макеті.
Покликання:
unicode-range - налаштування у якому вказують набір необхідних символів у шрифті з . Можна не завантажувати всі символи. Тоді шрифт швидше завантажиться. Якщо не вказати unicode-range в правилі @font-face, то шрифт буде використовуватися для всіх символів, незалежно від їхнього Unicode-коду. Це може трохи збільшити час завантаження шрифту.
Дуже часто розробники-верстальники мають справу з готовим дизайн-проєктом у Figma. І текстових елементів буває настільки багато, що визначити всі використовувані шрифти в проєкті буває дуже важко. Для розв'язання цього питання існує плагін . Цей плагін буде доступний, коли ви працюєте з власним проєктом у Figma, або якщо він доданий в чернетки.
