Як підключити шрифт до сайту за допомогою CSS

🗓️ Оновлено: 10.08.2022
💬Коментарів: 0
👁️Переглядів: 724

Шрифти – одна з базових речей, що використовуються при розробці сайту. Поряд із картинками, файлами css, js – шрифти незамінний елемент сучасного сайту. Тому часто у верстальників (і не лише) виникає питання – як підключити шрифт до сайту? І як це можна зробити за допомогою CSS. Давайте розберемося з різними варіантами підключення шрифту до HTML сторінці.

Важливе уточнення

Не всі сайти працюють однаково. Тому деякі методи не будуть актуальними для вирішення вашого завдання. Ця стаття більше орієнтована на людей, які стикалися з HTML та CSS, а також мають можливість редагувати файли на своєму сайті.

Підключення за допомогою CSS через @font-face

У CSS є таке правило font-face, що дозволяє підключити потрібний шрифт до сайту.

Приклад підключення шрифту через font-face:

@font-face {
  font-family: 'MyFont';
  src: url(../fonts/MyFont.ttf') format('truetype');
}

Давайте розберемо синтаксис. Що ми щойно зробили.

font-family – задали назву нашого шрифту. Потім, коли ми захочемо, наприклад, задати всім h1 цей шрифт, достатньо CSS прописати наступне:

h1 {
  font-family: 'MyFont';
}

Далі – src. За допомогою цієї властивості ми вказуємо шлях до нашого шрифту. У нашому конкретному випадку файл MyFont.ttf знаходиться в папці fonts, яка на один рівень вище нашого css файлу, в якому і виконується даний код. Можна також вказати URL-адресу, за якою доступний шрифт.

Крім src є ще властивість local. Ми можемо сказати браузеру, щоб він шукав певний шрифт на локальному комп’ютері користувача. Це може скоротити час завантаження сторінки, якщо користувач має на комп’ютері поточний шрифт.

До речі, ми можемо задати відразу кілька форматів одного і того ж шрифту (для кращої підтримки у різних браузерах):

@font-face {
  font-family: 'MyFont';
  src: url('webfont.eot'); /* Підтримується в IE9 */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Для суперсучасних браузерів */
       url('webfont.woff') format('woff'), /* Для суперсучасних браузерів */
       url('webfont.ttf')  format('truetype'), /* Для Сафарі, Андроїд, iOS та багатьох інших */
       url('webfont.svg#svgFontName') format('svg'); /* Для iOS */
}

Браузер сам вибере потрібний йому шрифт. Список доступних форматів: “woff”, “woff2”, “truetype”, “opentype”, “embedded-opentype”, та “svg”.

Якщо ви хочете підключити кілька різних шрифтів, можете кілька разів використовувати @font-face.

Як підключити шрифт із Google Fonts

Досить часто потрібний шрифт знаходиться у популярній бібліотеці Google Fonts.

Підключити шрифт із Google Fonts на сайт можна різними методами.

Наприклад, ви можете сказати шрифт, що сподобався, і потім додати його за допомогою @font-face, про яку я розповів вам вище.

Можна скачати шрифт з Google Fonts

Також є варіанти.

Знаходьте потрібний вам шрифт.

Вибираєте потрібне зображення (font-weight):

Вибираєте потрібне зображення

Потім, у верхньому правому кутку натискайте на іконку “View selected families:

Натисніть на іконку “Подивитися вибрані шрифти”

У вас з’явиться вікно, де ви можете вибрати спосіб, як додати шрифт на сайт через link або @import. Link (вибрано за замовчуванням) – вам достатньо копіювати код і вставити всередині тега <head></head> (1 на зображенні нижче). Далі, ви можете задавати елементам потрібний шрифт за допомогою CSS (2 на зображенні нижче).

1 – вставляємо в head, 2 – вставляємо в CSS

Варіант з @import нічим не відрізняється, проте, якщо ви приберете <style></style> у коді, який пропонується скопіювати, то можете вставляти @import прямо до головного css файлу. Варіант з @import дозволяє бути гнучкішим, проте, вимагає більше уваги.

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

CSS Головоломки в Telegram
Підписуйся і не пропускай:
Актуальні новини
Цікаві завдання
Корисні добірки
Стаття була корисною?
👍
Так - 2
👎
Ні - 0
💬Коментарі:

CSS Головоломки в Telegram
Підписуйся і не пропускай:
Актуальні новини
Цікаві завдання
Корисні добірки
Наш рейтинг
🏆Найкращий хостинг для сайту
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Як зробити гамбургер (бургер) меню – готовий код та докладне пояснення
Переглядів: 18285
Поява елементів при скролі
Переглядів: 16841
Як вирівняти картинку по центру за допомогою CSS
Переглядів: 6953
Як зробити плавне збільшення картинки при наведенні – ефект на чистому CSS
Переглядів: 6789
Як зробити ефект натискання кнопки на CSS
Переглядів: 6209
Перевірка знань
🤔Чи добре ви знаєте CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Колір 2022 року
Інститут кольору Pantone оголосив цвіт 2022 року. Це бузковий відтінок під назвою 17-3938 Very Peri.
#6667ab