Ну ось ви і купили новенький і гарний шрифт. Ви вже готові, ви вже зрозуміли, що хочете цього. Це не зупинити. Бажання вбудувати цей шрифт в свій сайт. Нестандартний і дуже оригінальний.
Так давайте розглянемо технічну сторону цього питання, а саме:
Як додати нестандартний шрифт на сайт?
Деякі факти про технології sIFR:
підключення шрифту
Підключення шрифту за допомогою технології sIFR проходить в кілька етапів.
Після цього копіюємо вміст файлу sIFR-screen.css в свій стиль і додаємо код заміни шрифту.
або в sIFR.js, або в код HTML.
Cufón
Серйозним мінусом даної технології є неможливість виділення тексту через використання тега canvas, а також необхідність вказувати конкретний тег при ініціалізації шрифту.
підключення шрифту
І в цьому випадку підключення складається з декількох етапів.
Тепер прийшла пора вибрати, які саме елементи сторінки ми будемо замінювати нашим нестандартним шрифтом. Для прикладу це буде заголовок H1:
Ось і все, досить легко і зрозуміло.
Всі параметри, які стосуються оформлення тексту, беруться з CSS.
@ Font-face
Mo'Bulletproofer - вдосконалений синтаксис @ font-face Пола Айріш, складений Річардом Фінк. страждає подвійний декларацією властивостей.
підключення шрифту
Тут все просто: задаємо в css назва шрифту, яке буде застосовуватися до елементів веб-сайту, за допомогою font-family.
«Як я можу отримати мій улюблений шрифт у форматі svg?»
Тут вам на допомогу прийде чудовий сервіс FontSquirrel. а саме - його генератор @ font-face
Google Font API
Наш час. корпорація Добра
Альтернативним і з кожним днем все більш популярним сервісом для роботи з нестандартними шрифтами є Google Font API.
У чому ж переваги Google Font API?
- Він включає в себе вибір високоякісних безкоштовних (open-source) шрифтів.
- Працює в більшості браузерів.
- Вкрай простий у використанні.
- Оскільки шрифти знаходяться в одному і тому ж місці в Інтернеті, веб-браузер буде їх кешувати і для інших сайтів, завантаживши тільки раз.
підключення шрифту
Підключення шрифту за допомогою Google Font API починається з захоплюючої подорожі по бібліотеці шрифтів і вибору необхідного шрифту (або створення набору з декількох, якщо це необхідно).
Після вибору ми переходимо до «Використанню» - наступного етапу нашої подорожі. На екрані використання ми бачимо кілька важливих блоків:
- Блок вибору накреслень.
Наприклад, якщо ви не впевнені, що будете використовувати жирне накреслення шрифту, просто відключіть його - це зменшить час завантаження сторінки.
Наприклад, якщо ви точно знаєте, що не будете використовувати кирилицю на сайті - сміливо викреслюйте її з вашого набору.
Є три способи вбудувати шрифт за допомогою Google Font API:
Просто додати в блок head
Просто додати код в початок вашого CSS
Цей код потрібно додати в блок head або перед закриває тегом body
Ну ось ми і розглянули найактуальніші техніки вбудовування шрифтів. Вам залишається тільки вибрати найбільш підходящу - і вперед, до чарівним просторах типографіки і шрифтового різноманітності.
При цьому, звичайно, не варто забувати, що нестандартні шрифти часто бувають комерційними. і для їх використання необхідно придбати ліцензію.