Доброго времени суток 🙂
Сьогодні вирішив Вам розповісти про маленьку, ну дуже корисну для деяких функцію. Якщо Ви маєте свій сайт, то напевно замислювалися про те, щоб зробити його більш приємним для очей користувача. Одним з чимало Важливих факторів, який впливає на зовнішній вигляд - це шрифт. За часту використовуються стандартні шрифти, які підтримую браузери, але іноді хочеться виділити свій сайт, тому є потреба в підключенні сторонніх шрифтів.
Значить у Вас є сайт і Ви задалися питанням підключення шрифтів до нього. До речі, якщо вас цікавить питання про реєстрацію домену і Ви серйозно задумалися про те, щоб мати сайт, то думаю Вам цікаво буде прочитати статтю - Як зареєструвати домен. І так, що потрібно, щоб здійснити підключення?
1. Знайти шрифт
2. Формат шрифту
Найчастіше шрифти йдуть в форматі TTF. Такий формат використовує операційна система windows. Першим з браузером його розуміє Firefox. Але для того щоб всі браузери відображали коректно, шрифт повинен бути в декількох розширеннях. Щоб знати які розширення підтримують різні браузери.
3. Підключення шрифту
Підключити шрифт можна двома способами.
І так розглянемо перший спосіб. Потрібно відразу шукати шрифти, які йдуть повним комплектом з різними розширеннями. Якщо ж вам подобається шрифт, а він йде тільки у форматі TTF, то можна використовувати сервіс для генерації шрифтів.
Для початку створіть папку на сайті - в темі сайту, шаблоні або просто в корені. Назвемо її наприклад font. Туди треба покласти файли шрифту з різними розширеннями як це було описано вище. Наприклад ми використовуємо шрифт - helioscond-webfont. У папці має лежати три файли.
- helioscond-webfont.eot
- helioscond-webfont.ttf
- helioscond-webfont.woff
І так, щоб підключити шрифт, потрібно прописати рядки коду в Ваш файл стилів. за часту це файл style.css. Якщо у Вас інший, то в нього. У самому верху додаємо наступне
Якщо ви скачаєте готовий архів з усіма форматами або використовуєте генератор, який видасть, той же архів, то там всередині буде файл зі стилями, якщо ж ні? використовуйте як в прикладі, змінюючи назви та шлях.
У другому рядку, задаємо ім'я шрифту і потім якщо якогось класу або id задати стиль з використанням даного шрифту просто прописуємо цього рядка з назвою шрифту.
приклад:
Далі йде підключення кожного файлу з різним розширенням, щоб всі браузери розуміли що від них хочуть, так би мовити, задаємо кроссбраузерность.
В кінці вказуємо стиль шрифту. В даному випадки, це нормальний - normal. Буває ще - bold і light або regular. Якщо у Вас все або кілька, то для кожного прописується повторно. Також зверніть увагу на шлях. У мене папка font лежить в тому ж каталозі що й файл стилів, тому в стилях шлях
Якщо у Вас інший шлях, то коректно вкажіть його.
Таким чином, буде підключений шрифт, який лежить на Вашому сайті.
Другий спосіб, це підключення шрифту з стороннього сервісу. Для прикладу виберемо google шрифти, які можна знайти тут - google.com/webfonts
Підключення зі стороннього сервісу, теж здійснюється трьома способами.
Перший через елемент link в шапці Вашого сайту перед закривається тегом head. Рядок буде мати приблизно такий вигляд.
Другий варіант, через правило @import. Таку рядок вставляємо в свій CSS-файл в самому верху.
У стилях до класу або айди вказуємо - font-family: 'Cuprum', sans-serif; У нашому прикладі це шрифт Cuprum.
У способу підключення шрифтів через сторонній сервіс, є свої плюси
Тепер Ви знаєте, як можна підключити сторонній шрифт до свого сайту. Яким саме способом, вирішувати Вам.
На цьому все. Дякую за увагу 🙂
Якщо Вам був корисним моя праця, можете підтримати сайт :)
Привіт дорогий друже
У тебе встановлено розширення AdBlock або подібне. Додай мій сайт в білий список, і тим самим внесеш свій внесок в його розвиток. Інструкція як відключити AdBlock Хочу й собі віконце