Мы уже отмечали, что есть немало интересных трендов, которые так или иначе украсят ваш сайт, сделают его прогрессивнее и привлекательнее на фоне конкурентных решений. В частности, об этом шла речь в уроке 19.1, и в конце отмечалось, какую роль играют шрифты в современном сайтостроении.
Конечно, в данной статье мы не будем рассматривать все существующие решения, но несколько интересных вариантов мы рассмотрим. Это Google Fonts, Adobe Typekit, CSS3 @Font-Face. Но перед этим отметим, что существует даже несколько тем, где количество кастомных шрифтов переваливает за сотню. Но это совсем уж крайность: на практике такое количество неплохо замедлит работу сайта.
Где можно взять наиболее популярные кастомные шрифты?
Известно, что по-настоящему уникальные шрифты стоят недешево. Но есть и немало хороших бесплатных вариантов.
Google Fonts
Google предлагает не только отличный поисковик и инструменты для монетизации сайтов, но и отличные шрифты. Удивительно, но библиотека Google Fonts содержит невероятное количество всевозможных вариантов, которые вы можете выбрать для своего проекта. Выбрать понравившийся вариант можно кликом по кнопке над шрифтом. После этого вам будет предложен выбор стилей: выбирайте только те, которые захотите использовать. Обратите внимание: внизу страницы будет область встроенного кода. Данный код нужно будет скопировать и позже добавить в файл header.php используемой темы, сразу после открытия тега <head>. Также код нужно добавить в style.css темы:
.h1 site-title {
font-family: ‘Open Sans’, Arial, sans-serif;
}
После этого пользовательские шрифты можно будет использовать.
Adobe Typekit
Также интересный ресурс, где можно найти кастомные шрифты. Имеет премиум-версию и бесплатную. В первой шрифты расписаны подробно, во второй – лимитировано. Для того чтобы воспользоваться предложениями ресурса, нужно завести аккаунт и создать свой kit для шрифтов. После этого вы можете выбрать шрифт и добавить его в созданный kit, затем код вашего kit копируется и сохраняется. После вам необходимо будет установить и активировать плагин Typekit Fonts for WordPress. Ранее сохраненный код нужно разместить на странице настроек плагина. Теперь осталось только добавить код в style.css:
h1 .site-title {
font-family: ‘modesto-condensed’, Arial, sans-serif;
}
После – шрифты будут готовы к использованию.
На этом варианты обзавестись новыми шрифтами не исчерпываются: не менее интересные мы рассмотрим в уроке 60.2.
