Як використовувати Google Fonts у наступному веб-проекті

Тож ви напевно чули, що Google має сотні безкоштовних веб-шрифтів, готових до використання для вашого наступного проекту. Але як ви використовуєте їх на своєму веб-сайті? Ця стаття допоможе вам пройти всі кроки, щоб запустити їх на своєму веб-сайті. Це має зайняти менше 10 хвилин!

Що таке шрифти Google?

"Google Fonts вперше був запущений в 2010 році як інженерна ініціатива з просування Інтернету вперед та його пришвидшення". - Google Design

Google Fonts вийшов у 2010 році, швидко перетворившись на найбільший в Інтернеті безкоштовний вибір шрифтів із відкритим кодом. Усі шрифти Google безкоштовні для комерційного та особистого користування. Веб-сайт Google Fonts полегшує кожному швидкий вибір та використання різних шрифтів для власних потреб дизайну.

Хто використовує Google Fonts?

Всі роблять! Графічні дизайнери, UX-дизайнери, дослідники, розробники, веб-дизайнери, блогери, менеджери соціальних мереж, підприємці, художники, студенти, викладачі, фотографи та багато інших. Я бачив, як Google Fonts використовується на білбордах, плакатах, презентаційних майданчиках, весільних запрошеннях, веб-сайтах та книгах.

Хто створює шрифти?

Google Fonts співпрацює з дизайнерами шрифтів, ливарними цехами та спільнотою дизайнерів у всьому світі. Ці люди та організації розробляють шрифти, які ви бачите в Google Fonts. Наприклад, Лукаш Дзедзіч - незалежний дизайнер шрифтів, який створив популярний шрифт Lato. Ливарня шрифтів на ім'я ParaType розробила шрифт PT Serif.

Чому Google піклується про шрифти?

Кожне посилання на API Google Fonts на веб-сайті надає Google можливість більше виконувати пошук даних. Це звучить грубо? Так, але я не думаю, що це повинно зупинити вас від використання Google Fonts.

Інша більш втішна причина, через яку Google дбає про шрифти, полягає в тому, що вони хочуть зробити веб-шрифти з відкритим кодом доступними для широких мас. Вони хочуть зробити швидшу, красивішу павутину, якою буде простіше орієнтуватися та користуватися. Вони також запустили Google Fonts ще в 2010 році, коли така послуга була вкрай необхідною, тому вони вирішили ще одну проблему, яку ми мали в Інтернеті. #dontbeevil

Чому я повинен розглядати можливість їх використання?

Ви не можете перемогти вільно. Чи правий я? Окрім того, що ви безкоштовні, вам слід розглянути можливість використання шрифтів Google для наступного проекту веб-дизайну, оскільки…

  • Шрифти легко застосувати на вашому веб-сайті
  • На вибір є понад 850 шрифтів (і з урахуванням)
  • Загальна якість шрифтів продовжує зростати
  • Google Fonts також можна завантажити для друку

Гаразд, гаразд, гаразд! Тепер про те, як ви ними користуєтесь.

Як користуватися шрифтами Google - крок за кроком

1) Перейдіть на веб-сайт Google Fonts

Відвідайте веб-сайт Google Fonts, де ви зможете вибрати з 853 сімейств шрифтів та підрахувати! Веб-сайт дозволяє фільтрувати результати за стилем шрифту, мовами, популярністю та вагою. Google Fonts також пропонує нові шрифти, якщо ви перейдете на сторінку "Рекомендовані".

2) Шукайте шрифти, які вам подобаються

Якщо ви пам’ятаєте прізвище шрифту, ви можете шукати його.

3) Натисніть «+», коли будете готові до використання

Кожне сімейство шрифтів має кнопку з плюсом у верхньому правому куті. Натисніть кнопку плюса, щоб додати сімейство шрифтів до «шухляди вибору», що з’являється внизу екрана.

4) Повторіть кроки 1–3, якщо ви шукаєте більше одного шрифту для використання

5) Клацніть на «шухляду вибору», щоб показати всі вибрані вами шрифти

У "шухляді вибору" ви побачите всі додані шрифти. Тут ви знайдете код для додавання на свій веб-сайт. Ви також можете завантажити шрифти на робочий стіл.

6) "Ящик вибору" - це місце, де ви захопите код, який скопіюєте / вставте в HTML та CSS-код веб-сайтів

З "шухляди вибору" ви скопіюєте код, щоб вставити його у свій HTML та CSS. Для того, щоб Google Fonts працював на вашому веб-сайті, ви повинні мати як сімейство шрифтів, зв’язане з API Google Fonts (у HTML), так і сімейство шрифтів, вказане (у CSS).

7) Додайте різні ваги та стилі шрифтів, якщо хочете, натиснувши вкладку “налаштувати”

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

8) Скопіюйте HTML-код і вставте його на веб-сайті

Гаразд, ми майже закінчили! Все, що нам потрібно зробити зараз, - це скопіювати та вставити HTML і CSS-код на свій веб-сайт. Спочатку скопіюйте посилання HTML у заголовок вашого документа HTML.

9) Скопіюйте правило CSS та вставте його у файл CSS вашого веб-сайту

Нарешті, нам також потрібно скопіювати та вставити правила CSS у ваш файл CSS. Якщо ви додаєте один шрифт Google для свого веб-сайту, ви можете додати правила сімейства шрифтів CSS у свій тег body. В іншому випадку вам потрібно буде переконатися, що додаєте його до правильних елементів у файлах CSS.

10) Збережіть обидва файли (HTML і CSS), потім оновіть свій веб-сайт і перегляньте новий шрифт

Не забудьте зберегти та оновити!

Ось тобі! Ви успішно впровадили свій перший шрифт Google на своєму веб-сайті. Вітаємо, ви кодуєте вас. Справедливо сказати, що Google Fonts в основному…

Більше читання

  • “Переосмислення шрифтів Google” Юїна Чієна (Google Design)
  • “6 порад для кращого поєднання шрифтів”, Хайден Міллс
  • "Вибір веб-шрифтів: Посібник для початківців" від Google Fonts

Дякуємо за читання

Не соромтеся залишити коментар нижче або зв’язатися зі мною у Twitter із будь-якими питаннями ✌️

Крім того, я створюю пару шрифтів, яка допомагає вам поєднувати шрифти Google. Ознайомтесь із нашою новою публікацією Medium, щоб прочитати більше публікацій із типографії!