В предыдущем уроке 60.1 мы начали рассматривать варианты установки новых уникальных шрифтов, которые доступны каждому. Что ж, Google Fonts и Adobe Typekit – это хорошие варианты. Но также вы можете воспользоваться CSS3 @font-face – данный инструмент позволит вам добавлять любые понравившиеся шрифты на сайт.
Шрифты CSS3 @font-face
Данный метод позволяет добавить на ваш сайт любые кастомные шрифты. Но для того чтобы воспользоваться ими, необходимо загрузить понравившиеся шрифты в веб-формате. Если же поддержки веб-форматов у вас нет, можно воспользоваться таким инструментом, как FontSquirrel Webfont generator, который поможет в конвертировании.
Полученные после конвертирования файлы нужно загрузить на веб-хостинг. Как уже отмечалось во многих уроках, для этого стоит воспользоваться каким-нибудь FTP-клиентом или File Manager-ом. Предпочтительнее загружать шрифты в папку fonts в корневом каталоге темы оформления.
Подключение шрифтов в таблице стилей при помощи CSS3 @font-face:
После добавления кода нужно будет поменять самейство ваших шрифтов font-family и URL на собственные. Используйте данные шрифты следующим образом:
.h1 site-title {
font-family: «Arvo», Arial, sans-serif;
}
В завершение стоит сказать, что использование CSS3 @font-face – не всегда наиболее оптимальное решение. Ведь в данном случае может возникнуть дополнительная нагрузка на сайт. При использовании шрифтов с Typekit или с Google Fonts будет лучше, если они будут загружаться напрямую с сервера.
