@font-face - це CSS-правило, яке дає змогу відображати шрифти на веб-сторінках в інтернеті. До того, як з'явилося це правило, вебмайстри могли використовувати на своїх сайтах обмежений набір шрифтів, які найпоширеніші та встановлені на комп'ютерах користувачів. З появою @font-face, до сайту з легкістю можна підключити будь-який специфічний шрифт.
Якщо ви завантажили шрифт на нашому сайті, в архіві зі шрифтами ви знайдете готовий CSS-код, який залишиться скопіювати і помістити в CSS-документ, що під'єднаний до проєкту.
Покрокове встановлення
1. Виберіть потрібний шрифт і натисніть "завантажити для сайту".
2. У корені свого сайту створіть папку fonts, і скопіюйте в неї завантажені шрифти.
3. відкрийте свій CSS-документ і скопіюйте в нього вміст текстового файлу з архіву.
4. Переконайтеся, що шлях до папки зі шрифтами прописано правильно. Залежно від положення папки, в якій знаходяться шрифти, шлях може містити одну або кілька крапок.
5. Готово. Скопіюйте властивість із назвою сімейства і вставте в селектор, для якого ви прописуєте стилі.
Що якщо я вже завантажив шрифт в іншому місці, і хочу його підключити?
У такому разі вам потрібно знайти в інтернеті конвертор шрифтів і перетворити ваш ttf шрифт (або otf) у потрібні формати, а саме в eot, svg, woff і woff2. Це необхідно для того, щоб шрифт відображався і коректно працював у всіх браузерах, а також на мобільних пристроях.
Потім вам потрібно самостійно прописати правило @font-face, дотримуючись його синтаксису.
Синтаксис @font-face
Синтаксис правила можна умовно розділити на основні властивості та розширені.
Основні:
- font-family - вказує назву шрифту.
- src - вказує шлях шрифту. Це може бути URL шрифту, розташованого на сервері вашого сайту, URL шрифту розташованого на чужому сервері (наприклад, Google Fonts), або просто назва шрифту розташованого на комп'ютері користувача (Helvetica New Bold, Tahoma, Georgia тощо).
Розширені:
- font-display - визначає як буде відображатися шрифт, залежно від того, чи був він завантажений і чи готовий до використання.
- font-stretch - дає змогу регулювати ширину тексту.
- font-style - визначає накреслення шрифту - звичайне, курсивне або похиле (останні два це не одне й те саме).
- font-weight - встановлює насиченість шрифту, за шкалою від 100 до 900 (100-надсвітле, 900-наджирне).
- font-variant - визначає як потрібно представляти малі літери - залишити їх без модифікацій або робити їх усі великими зменшеного розміру (капітель).
- font-feature-settings - дозволяє керувати розширеними друкарськими функціями в шрифтах OpenType.
- font-variations-settings - дає змогу здійснювати низькорівневий контроль над варіаціями Open Type і TrueType шрифтів, вказуючи чотирибуквені назви осей.
- unicode-range - вказує діапазон Unicode кодів (гліфів), що використовуватимуться у шрифті.
Підключення шрифту до сайту за допомогою Google Fonts
Використання Google Fonts - це найбільш легкий спосіб підключення шрифту до сайту. Переходьте на їхній сайт, знаходьте потрібний шрифт, обираєте потрібні накреслення для встановлення і копіюєте код.
Скопійований код потрібно розмістити в тілі тега head, на вашій сторінці html.
Мінус цього способу в тому, що якщо під час верстки сайту у вас пропав інтернет - шрифти перестануть відображатися і заміняться на стандартні, оскільки файли знаходяться не на локальному комп'ютері, а на серверах Google. Також, є шанси, що коли ви приїдете на презентацію верстки до клієнта (або просто на узгодження), і у нього не буде Wi-Fi, то проблема повториться.
