Лекції
Почати
Почати навчання
JavaRush /Курси /Frontend SELF UA /Підключення шрифтів

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

Frontend SELF UA
Рівень 14 , Лекція 2
Відкрита

3.1 Веб-шрифти

Підключення шрифтів на веб-сторінках грає ключову роль у створенні унікального та привабливого дизайну. Веб-шрифти дозволяють використовувати шрифти, які не встановлені на комп'ютері користувача, за рахунок їх завантаження із сервера. Google Fonts — один із найпопулярніших сервісів для використання веб-шрифтів. Розглянемо детальніше, як підключати веб-шрифти та Google Fonts на веб-сторінках.

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

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

Приклад підключення веб-шрифтів за допомогою @font-face:

Спочатку потрібно завантажити файли шрифта на ваш сервер. Зазвичай це файли форматів .woff, .woff2, .ttf, .eot і .svg.

Крок 2. Використання @font-face у CSS:

CSS 
    
      @font-face {
        font-family: 'MyCustomFont';
        src:  url('fonts/MyCustomFont.woff2') format('woff2'),
              url('fonts/MyCustomFont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
      }

      body {
        font-family: 'MyCustomFont', sans-serif;
      }
Telegram

Переваги використання @font-face:

  • Контроль: повний контроль над вибором і використанням шрифтів
  • Сумісність: підтримка різних форматів шрифтів для забезпечення сумісності з різними браузерами
  • WOFF (Web Open Font Format): широко підтримуваний формат для веб-шрифтів
  • WOFF2: покращена версія WOFF з кращим стисненням
  • TTF (TrueType Font): стандартний формат для шрифтів, підтримуваний більшістю браузерів
  • EOT (Embedded OpenType): формат, підтримуваний Internet Explorer
  • SVG: формат для використання шрифтів у SVG-графіці

3.2 Google Fonts

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

Підключення шрифтів за допомогою Google Fonts:

1. Вибір шрифту на сайті Google Fonts:

Перейдіть на Google Fonts і оберіть шрифт, який хочете використовувати.

2. Отримання посилання для підключення:

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

3. Вставка посилання в HTML-документ:

Скопіюйте згенероване посилання й вставте його в секцію <head> вашого HTML-документа.

HTML 
    
      <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

1. Застосування шрифту у CSS:

Використовуйте властивість font-family для застосування шрифту до елементів на сторінці.

CSS 
    
      body {
        font-family: 'Roboto', sans-serif;
      }

      h1 {
        font-family: 'Roboto', sans-serif;
        font-weight: 700;
      }

Приклад використання Google Fonts через HTML:

HTML 
    
      <html lang="uk">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Google Fonts</title>
          <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
          <style>
            body {
              font-family: 'Roboto', sans-serif;
            }
          </style>
        </head>
        <body>
          <p>Цей текст відображається з використанням шрифту Roboto.</p>
        </body>
      </html>

3.3 Використання CSS @import

Шрифти Google також можна підключити за допомогою правила @import у CSS.

Приклад використання Google Fonts через @import:

CSS 
    
      @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

      body {
        font-family: 'Roboto', sans-serif;
      }

Переваги використання Google Fonts:

  • Простота використання: легко інтегрувати шрифти за допомогою одного рядка коду
  • Великий вибір: доступ до великої кількості шрифтів різних стилів і категорій
  • Оптимізація продуктивності: шрифти завантажуються з високопродуктивних серверів Google

Атрибут display="swap" у коді для підключення веб-шрифтів Google Fonts покращує продуктивність і користувацький досвід. Коли ви підключаєте веб-шрифти, браузер має спочатку завантажити й відобразити шрифт, перш ніж зможе відтворити текст. Це може викликати затримку, особливо при повільному інтернеті. display="swap" вирішує цю проблему, вказуючи браузеру використовувати системний шрифт за замовчуванням, поки завантажується веб-шрифт. Як тільки веб-шрифт завантажиться, браузер замінить ним системний.

Вплив на продуктивність:

Під час використання веб-шрифтів важливо враховувати їхній вплив на продуктивність веб-сторінки. Завантаження великої кількості шрифтів або накреслень може збільшити час завантаження сторінки. Щоб мінімізувати цей вплив, дотримуйтесь таких рекомендацій:

  • Використовуйте мінімально необхідну кількість накреслень: вибирайте лише ті накреслення, які вам дійсно потрібні
  • Використовуйте атрибут display="swap": це забезпечує відображення тексту системним шрифтом, поки завантажується веб-шрифт, що покращує сприйняття продуктивності користувачем
  • Оптимізація доставки шрифтів: використовуйте кешування й попереднє завантаження (preload) для покращення продуктивності
Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ