Оновлено: 19.05.2025

@font-face

Frontend CSS Правила @font-face

Правило @font-face дає змогу визначити налаштування шрифтів, а також завантажити специфічний шрифт на комп'ютер користувача.

 

 

⌨️ Синтаксис

@font-face { властивості шрифту }

 

 

⚙️ Значення

Усередині конструкції @font-face може міститися набір властивостей для зміни параметрів шрифту (font-family, font-size, font-style тощо), а також посилання на шрифтовий файл. Посилання записується у вигляді src: url(<адреса>), де <адреса> - відносний або абсолютний шлях до файлу.

 

 

📋 Приклад

<!DOCTYPE html>
<html>
  <head>
   <metacharset="utf-8">
   <title>@font-face</title>
   <style>
    @font-face {
     font-family: VeinlineRegular; /* Font name */
     src: url(https://assets.ithillel.ua/wiki/VeinlineRegular.ttf); /* Path to file with font */
    }
    P{
     font-family: VeinlineRegular;
    }
   </style>
  </head>
  <body>
   <p>The length varies by the Dorian microchromatic interval,
      but if there were five times fewer songs, it would be better for everyone.</p>
  </body>
</html>