Центральна спільнота
Advertisement
Центральна спільнота

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

Крок за кроком[]

Google fonts import.png

  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.
Advertisement