FANDOM


Використання нестандартних шрифтів — кращий спосіб персоналізувати ваш проект, а використовуючи Google Fonts зробити це можна простіше та швидше.

Крок за кроком Редагувати

Google fonts import
  1. Відкрийте сторінку https://fonts.google.com[1]
  2. Вибравши потрібний вам шрифт, натисніть на іконку "+", розташовану в правій частині заголовка з назвою шрифту. По натисненню знизу з'явиться діалогове вікно з заголовком "1 Family Selected". За його натисканням ви зможете побачити список всіх шрифтів, які вибрали.
  3. В розділі "Your Selection" діалогового вікна перейдіть у розділ "EMBED" -> "Embed fonts" -> "@IMPORT". Якщо все було зроблено вірно, то ви побачите якусь подобу коду @import url('https://fonts.googleapis.com/css?family=назва_шрифту');, де назва_шрифту — назва вибраного вами шрифту.
  4. Ігноруючи <style> та </style>, скопіюйте інший код та вставте його на самому початку локального CSS.
  5. Не забудьте звернути увагу на розділ "Specify in CSS", розташований у тому ж діалоговому вікні. У ньому буде зазначено те, як оголосити та використовувати шрифт в CSS.

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

Використання декількох шрифтів Редагувати

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

Під час перегляду шрифтів, додайте їх за допомогою "+". Після того, як потрібні вам шрифти були обрані, відкрийте діалогове вікно і виконайте пункт 3 в списку вище. Всі вибрані шрифти в списку будуть перераховані в посиланні у кінці через |, наприклад @import url('https://fonts.googleapis.com/css?family=Bungee%7CRoboto');. По завершенню пункту 4, з допомогою одного імпорту будуть доступні відразу декілька шрифтів.

Див. також Редагувати

Примітки Редагувати

  1. Google Fonts працюють краще в браузерах Chrome, Firefox, Edge and Safari. Якщо Ви використовуєте Internet Exlorer або якийсь інший не вказаний браузер, то отримаєте повідомлення про те, що ваш браузер не підтримується: Your browser is not currently supported.
Community content is available under CC-BY-SA unless otherwise noted.