Встановити шрифт для сайту
Чому не Fontsquirrel.
Не буду писати, навіщо потрібно робити шрифт кросбраузерності і, як його додати на сайт, про це я вже писав у статті про кроссбраузерность шрифту.
Сьогодні тільки поділюся ще двома ресурсами, які я знайшов в мережі. Вони позбавлені недоліків, якими володіє Fontsquirrel, а недоліки його такі:
- Закрашуються дрібні деталі;
- Відхилення від базової лінії;
- Останнім часом часто став відмовляти в конвертації, т. К. Шрифт в його чорному списку.
Часом він може зіпсувати шрифт дуже непередбачувано.
Звичайно, не можна не згадати про його достоїнства, наприклад дуже детальна настройка. По-моєму через це величезного плюса він і придбав популярність і ще може конкурувати з іншими подібними сервісами.
Сервіси для конвертації шрифтів.
Власне ось ті конвертери шрифтів, якими я хотів поділитися:
Обидва вони дуже прості у використанні. Це одночасно і плюс і мінус тому немає можливості налаштувати шрифт під свої потреби, наприклад залишити тільки ті символи, які ви будете використовувати, тим самим скоротивши вагу файлів шрифту.
Можна відзначити перевагу другого ресурсу -він підтримує досить багато розширень (pfa, pfb, pt3, sfd, ttf, otf, otb, t42, cef, cff, gsf, ttc, svg, ik, mf, dfont, bin, suit and bdf) , які можна подати на конвертацію.
Плюс першого ресурсу - він, як і Fontsquirrel на виході видає зручний архів з усіма популярними форматами (.woff. Svg. Eot. Ttf. Woff2) і файл css з прикладом як підключити ці формати через @ font-face.
Як додати шрифт на сайт.
Щоб додати можливість використовувати новий шрифт, вам потрібно додати в ваші стилі (файл .css) правило @ font-face. Покажу на своєму прикладі. Я скористався сервісом font-face generator і конвертував шрифт Century Gothic Regular.ttf. В результаті отримав архів з шрифтом в різних форматах, які будуть допоможуть відображати правильно у всіх браузерах. Також в архіві є файл .css в якому прописано це правило @ font-face. У файлі вже все назви проставлені. Його вміст:
Якщо файл .css. де ви прописали @ font-face і всі файли (всі формати шрифту) ви помістили в одну папку, то він вже буде працювати. І наприклад задавши в стилях:
До всіх абзаців має застосовуватися правило і відповідно його шрифтом буде Century Gothic Regular.
Якщо файл стилів і файли шрифтів лежать в різних папках, то потрібно змінити шлях до файлів в конструкції @ font-face.
Поділитися 1 1 0 0
