Урок 60.2. Добавление кастомных шрифтов

Добавление кастомных шрифтовВ предыдущем уроке 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 будет лучше, если они будут загружаться напрямую с сервера.

    Добавить комментарий

    Ваш адрес email не будет опубликован.

    Главное меню