http://poradumo.pp.ua

Online Журнал-Світ порад.
Головна сторінка

Як підключити шрифт до сайту?

Як підключити шрифт до сайту?
Давно пройшли ті часи, коли вибір шрифтів для веб-дизайну обмежувався стандартним, так званим «безпечним» набором. У нього входили всього дев'ять шрифтів, а саме Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuched MS і Verdana. З розвитком мови гіпертекстової розмітки і каскадних таблиць стилю, що використовуються для оформлення зовнішнього вигляду веб-сторінок, з'явилася можливість використання практично будь-яких шрифтів в дизайні сайтів незалежно від того, встановлені дані шрифти на комп'ютері користувача. Щоб використовувати на своєму сайті якийсь оригінальний шрифт необхідно мати сам шрифт, привести його до певних форматів і підключити до сайту. Розглянемо як це можна зробити.

Як підключити шрифт до сайту
Підключення нестандартних шрифтів до сайту може бути виконано як мінімум двома способами:


Швидким , коли сам шрифт підвантажується зі спеціалізованих сторонніх ресурсів.




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


Розглянемо обидва спобличчя на спрощених прикладах.

Швидке підключення шрифту до сайту за допомогою спеціальних сервісів
Існують різні сервіси, які зберігають у себе різні цікаві шрифти і надають можливість використання їх на різних сайтах. Одним з таких сервісів є Google Fonts. На його основі підключення шрифтів виконується наступним чином.
  1. Зайдіть на сайт сервісу Google Fonts встановіть фільтр, що вас цікавлять кириличні шрифти і виберіть один з вподобаних шрифтів.




    Натисніть кнопку Add to Collection щоб додати шрифт в свою колекцію.




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

    Як підключити шрифт до сайту?





    Скопіюйте код підключення шрифту для сайту, який буде мати приблизно такий вигляд:









    Вставити скопійований код між тегами в шаблоні сторінки вашого сайту.




    Призначте підключений шрифт одному або декільком елементам дизайну вашого властивості font-family . Наприклад, до тегу заголовка h1.









    Поновіть сторінку в браузері і перевірте результат.


    Ще одним подібним сервісом є сайт WebFont.ru. Підключення його шрифтів по-чому аналогічно розглянутому вище прикладу.
    1. Знайдіть підходящий шрифт на сайті WebFont.ru . Якщо ви знаєте назву цікавить шрифту, то скористайтеся пошуком по сайту.




      Після того, як шрифт знайдений натисніть кнопку отримати шрифт .

      Як підключити шрифт до сайту?





      З появи спливаючого вікна скопіюйте код вставки шрифту на сайт, який буде мати приблизно такий вигляд:



      @import "http://webfonts.ru/import/osans.css";





      Вставити код, що містить конструкцію @import файл CSS-стилів вашого сайту, або підключіть його в тегах на самій сторінці.









      Застосуйте властивість font-family до виділених елементів на сторінці. Наприклад, до тега абзацу p.









      Оновіть сторінку та перевірте отриманий результат.


      Незалежне від інших сервісів підключення шрифтів
      Щоб не залежати від сторонніх сервісів бажано зберігати і підключати шрифти шаблон безпосередньо на своєму хостингу або сервері. Виконується це трохи складніше, але не настільки, щоб ця задача була нездійсненною.
      1. Завантажте на свій комп'ютер файл зі шрифтом. Найчастіше шрифти доступні для скачування в форматі TTF - TrueType Font, розроблений компанією Apple і підтримуваним багатьма сучасними операційними системами.




        Щоб забезпечити кросбраузерність, тобто сумісність і однакове відображення шрифтів у різних браузерах, необхідно підключати шрифт до сайту в наступних форматах: ttf , eot , woff , svg . Сконвертувати вихідний файл зі шрифтом у всі необхідні формати можна за допомогою онлайн-сервісів, таких як: www.font2web.com , onlinefontconverter.com , www.freefontconverter.com , everythingfonts.com .
        Слід зазначити, що всі зазначені сервіси в тій чи іншій мірі трохи спотворюють шрифти під час конвертації. Набагато краще з цим завданням справляється спеціальна утиліта під назвою FontPrep . Але вона призначена тільки для операційної системи Mac OS.




        Після отримання всіх необхідних для підключення до сайту шрифту форматів, створіть в шаблоні окрему папку fonts , в яку скопіюйте отримані файли.




        Підключення шрифту до сайту проводиться використання правила @font-face наступним чином.









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



        body {
        font-family: 'ALSStory';
        font-size: 12px
        }

        У параметрі font-family тут необхідно вказувати назву шрифту у відповідності з аналогічним значенням правила @font-face.


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

        У висновку статті хотілося б порекомендувати не захоплюватися прикрашенням сайту і не встановлювати на нього багато нестандартних шрифтів. Пам'ятайте, що кожен новий підключається шрифт буде приводити до збільшення розміру кожної сторінки сайту і погіршення швидкості завантаження для користувачів.
of your page -->

Популярні поради

загрузка...