Інтеграція шрифтів за допомогою правил CSS, Особистий сайт WEB-розробника
Продовжимо темуінтеграції шрифтів на сайт, яку я почав у статті Інтеграція шрифтів Google Web Fonts. Ви не знайшли відповідний шрифт на згаданому вище сервісі від Google, або Ви намагаєтеся звести до мінімуму що-небудь підвантажуване при побудові сторінок Вашого сайту, інтегрувати шрифти доведеться нижче описаним способом.
Насамперед Вам необхідно буде знайти файл зі шрифтом та завантажити його собі на комп'ютер. Для нормальної інтеграції та надалі безхмарного використання шрифту цей файл буде необхідний у 3 форматах:
- Embedded OpenType (розширення eot ) – це формат, що впроваджуються у web-сторінки шрифтів Open Type, розроблений корпорацією Microsoft;
- Web Open Font Format (розширення woff ) – це формат стиснутого шрифту Open Type або True Type, що повністю збігається зі своїм оригіналом;
- TrueType (розширення ttf) – це формат комп'ютерних шрифтів, який розробила фірма Apple.
Я зазвичай створюю окрему директорію fonts в директорії css (у ній зазвичай знаходяться файли стилів сайту), куди і скидаю всі файли інтегрованих мною шрифтів.
Далі, використовуємо на початку файлу стилів сайту правило CSS:
Ви повинні пам'ятати, що це правило підтримується лише 2 і 3 версією CSS. Розглянемо інтеграцію на прикладі шрифту Corinthia, можете завантажити тут, архів із файлами шрифту та кодом CSS для інтеграції. Я зазвичай код інтеграції вписую в окремий файл стилів fonts.css і потім підключаю його на початку основного файлу стилів сайту ще одним правилом CSS:
Отже, пишемо у файлі стилів, в якому Ви здійснюєте інтеграцію шрифту, наступні рядки:
Зверніть увагу, що файли шрифту розміщуються в окремій директорії fonts . ТеперВи можете використовувати його, як і стандартні шрифти за допомогою: