Як підключити шрифт до сайту за допомогою CSS
Шрифти – одна з базових речей, що використовуються при розробці сайту. Поряд із картинками, файлами 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, про яку я розповів вам вище.
Також є варіанти.
Знаходьте потрібний вам шрифт.
Вибираєте потрібне зображення (font-weight):
Потім, у верхньому правому кутку натискайте на іконку “View selected families:
У вас з’явиться вікно, де ви можете вибрати спосіб, як додати шрифт на сайт через link або @import. Link (вибрано за замовчуванням) – вам достатньо копіювати код і вставити всередині тега <head></head> (1 на зображенні нижче). Далі, ви можете задавати елементам потрібний шрифт за допомогою CSS (2 на зображенні нижче).
Варіант з @import нічим не відрізняється, проте, якщо ви приберете <style></style> у коді, який пропонується скопіювати, то можете вставляти @import прямо до головного css файлу. Варіант з @import дозволяє бути гнучкішим, проте, вимагає більше уваги.
Якщо ви прочитали статтю, а шрифт досі не підключається, то пишіть у коментарях – ми розглянемо ваш код разом.
