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

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

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

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

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

Відео: Як встановити свій шрифт на сайт. Font-face

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

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

1. Зайдіть на сайт сервісу Google Fonts, встановіть фільтр, що вас цікавлять кириличні шрифти і виберіть один з вподобаних шрифтів.
   
2. Натисніть кнопку Add to Collection, щоб додати шрифт в свою колекцію.
   
3. Після вибір шрифту внизу сторінки з`явиться панель управління створеної колекцією шрифтів, в якій у вас знаходиться обраний шрифт. Натисніть кнопку Use, щоб отримати код вставки вибраного шрифту на свій сайт.
   
   
   
   сервіс Google Fonts
   
4. Скопіюйте код підключення шрифту для сайту, який буде мати приблизно такий вигляд:
   
   

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

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

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

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

   @import "https://webfonts.ru/import/osans.css"-

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

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

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

1. Завантажте на свій комп`ютер файл з шрифтом. Найчастіше шрифти надаються для скачування в форматі TTF - TrueType Font, розробленому компанією Apple і підтримуваним багатьма сучасними операційними системами.
   
2. Щоб забезпечити кроссбраузерность, тобто сумісність і однакове відображення шрифтів в різних веб-браузерах, необхідно підключати шрифт до сайту в наступних форматах: ttf, eot, woff, svg. Здійснити конвертацію вихідний файл зі шрифтом в усі необхідні формати можна за допомогою онлайн-сервісів, таких як: font2web.com, onlinefontconverter.com, freefontconverter.com, everythingfonts.com.
   Слід зазначити, що всі зазначені сервіси в тій чи іншій мірі трохи спотворюють шрифти під час конвертації. Набагато краще з цим завданням справляється спеціальна утиліта під назвою FontPrep. Але вона призначена тільки для операційної системи Mac OS.
   
3. Після отримання всіх необхідних для підключення до сайту шрифту форматів, створіть в шаблоні окрему папку fonts, в яку необхідно скопіювати отримані файли.
   
4. Підключення шрифту до сайту проводиться використання правила @ Font-face наступним чином.
   
   

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

   body {
   	font-family: `ALSStory`-
   	font-size: 12px
   }

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

Відео: Як підключити до свого сайту шрифти від Google Web Fonts?

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

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