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


 

При розробці дизайну сайту часто виникає необхідність в підключенні сторонніх шрифтів. У CSS дана можливість здійснюється через атрибут font-face. Файл самого шрифту повинен мати стандартне для Windows розширення TrueType (ttf) або OpenType (otf).



Вам знадобиться

— файл шрифту TrueType або OpenType.

Інструкція

  • Створіть файл таблиці каскадних стилів (. Css) і відкрийте його за допомогою Блокнота як звичайний текстовий файл. Далі впишіть рядки:

    @ font-face {
    font-family: «Назва шрифту»;
    src: url («шлях до файлу шрифту»);
    font-size: 12px;}

    Значення параметра font-family має збігатися з назвою вашого шрифту. Як url ​​можна вказувати як абсолютний, так і відносний шлях до файлу ttf чи otf. В font-size вкажіть розмір букв в пунктах, відсотках або пікселях. Відповідно до специфікації CSS ви додатково можете задати будь-які доступні параметри накреслення (наприклад, font-weight або font-style).


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

    не вимагає закриває дескриптора.

  • Для використання шрифту необхідно прописати додаткові параметри. Скористайтеся параметром font-family:

    h1 {font-family: «назва підключеного шрифту»;}

    Тепер всі заголовки першого рівня будуть написані буквами з вашого файлу. Якщо ви хочете надати власне накреслення всім словами на сайті, то вкажіть параметр font-family аналогічним чином в body:

    body {font-family: «ім’я шрифту»;}


  •                 Також ви можете створити певний клас користуватися ним при необхідності вже в самому HTML:

    . myfont {font-family: «назву шрифту»;}

    У коді сторінки це буде виглядати так:

    Зверніть увагу

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