Як використовувати свій шрифт на сайті.

При розробці дизайну сайту часто виникає необхідність в підключенні сторонніх шрифтів . У CSS дана можливість здійснюється через атрибут font-face. Файл самого шрифту повинен мати стандартне для Windows розширення TrueType (ttf) або OpenType (otf).
Вам знадобиться
  • - файл шрифту TrueType або OpenType.
Інструкція
1
Створіть файл таблиці каскадних стилів (.css) і відкрийте його за допомогою Блокнота як звичайний текстовий файл. Далі впишіть рядки: @ font-face {font-family: "Назва шрифту"; src: url ("шлях до файлу шрифту"); font-size: 12px; } Значення параметра font-family має збігатися з назвою вашого шрифту. В якості url можна вказувати як абсолютний, так і відносний шлях до файлу ttf або otf. У font-size вкажіть розмір букв в пунктах, відсотках або пікселях. У відповідності зі специфікацією CSS ви додатково можете задати будь-які доступні параметри накреслення (наприклад, font-weight або font-style).
2
Збережіть файл. Тепер підключіть його до вашої HTML-сторінці за допомогою тега, який зазвичай прописується в розділі: не вимагає закриває дескриптора.
3
Для використання шрифту необхідно прописати додаткові параметри. Скористайтеся параметром font-family: h1 {font-family: "назва підключеного шрифту"; } Тепер всі заголовки першого рівня будуть написані літерами з вашого файлу. Якщо ви хочете надати власне накреслення всім словами на сайті, то вкажіть параметр font-family аналогічним чином в body: body {font-family: "ім'я шрифту"; }
4
Також ви можете створити певний клас користуватися ним при необхідності вже в самому HTML: .myfont {font-family: "назву шрифту"; } У коді сторінки це буде виглядати так:

Заголовок 1

Простий заголовок

Зверніть увагу
Не всі браузери зможуть однаково добре відобразити сторонній шрифт. Для дизайну найкраще користуватися стандартними можливостями, вдаватися до зовнішніх файлів варто тільки в разі крайньої необхідності. Також вони можуть володіти великою вагою, а значить час завантаження сайту може значно збільшитися, і особливо це буде помітно при повільному інтернет-з'єднанні.