От автора: в данной статье мы поговорим с Вами веб шрифтах WordPress. Совсем недавно все еще говорили о Lobster. Не про того, который плавает в океане, а про веб-шрифт. Для тех, кто не слышал, Lobster это популярный Google шрифт.
Вы, должно быть, уже знаете, как использовать сторонние шрифты. В далеком 1998 году в CSS 2 появилось правило @font-face. В теории, с его помощью дизайнеры могли загрузить совершенно любой TrueType или PostScript шрифт на компьютер пользователя и использовать его на веб странице. К несчастью, на тот момент данное правило поддерживал только IE4. Люди боялись, что дорогие шрифты будут сливаться в сеть бесплатно. Сегодня же, в CSS3 до сих пор не решена проблема с пиратством, но теперь правило поддерживается во всех браузерах. Также с тех времен резко выросло разрешение экранов. Если вы до сих пор не умеете использовать сторонние шрифты, то пора научиться.
Общие свойства веб-шрифтов
Перед тем, как мы поговорим об использовании сторонних веб-шрифтов в WordPress, давайте посмотрим на них в целом.
Самый базовый уровень поддержки шрифтов это используемая операционная система. На настольных компьютерах и ноутбуках может быть множество разнообразных шрифтов, а для Android всего три.
К несчастью, это все, что у нас есть. Все мы знаем, как плохо Helvetica смотрится на Windows с размером 16px и ниже, а Arial смотрится и так идеально на старых версиях OS X.
Многие различия связаны с тем, что изначально операционка от Apple была привязана к старой технологии печати 72 точки на дюйм. Таким образом, для шрифтов в 10 точек выделяется 10 пикселей на экране. На тот момент Apple изготавливали вертикальные мониторы (портретные), которые были одного размера со стандартным американским листом бумаги, что позволяло делать сравнение один к одному в цифровой и печатной версии документов. Microsoft же выбрали 96 PPI (точек на дюйм) за основу, чтобы люди сидели от мониторов на 1/3 дальше, чем если бы они рассматривали обычный печатный документ. Таким образом на Windows все было больше на 1/3.
С 1990-х прошло много времени, много чего изменилось. Теперь у нас множество разрешений и размеров экранов. И если вы сами не зададите шрифт, то за вас это сделает браузер.
Еще одна проблема заключается в том, что некоторые организации ограничивают количество установленных на компьютер шрифтов. Однажды я работал в фирме, в которой на компьютерах были установлены только Georgia и Verdana. Доходило до того, что письма и email можно было отправить только в том случае, если шрифт совпадал с обще принятым.
Встроенные шрифты
Несмотря на корпоративные шрифты, большинство настольных компьютеров и ноутбуков используют шрифты, созданные в рамках проекта Microsoft Core Fonts for the Web Project. Пак шрифтов 1996 года включает в себя Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana и Webdings. В операционных системах могут применяться эти шрифты или их эквиваленты, но вот в браузерах немного по-другому.
Ограничение по шрифтам можно нивелировать с помощью стека шрифтов. С его помощью браузеру задается CSS правило, использовать один шрифт из набора. Шрифты бывают двух типов serif (с засечками на концах букв) и sans-serif (без засечек). Таким образом, можно создать семейство шрифтов font-family: Cambria, ‘Hoefler Text’, ‘Liberation Serif’, Times, ‘Times New Roman’, serif. Браузер просмотрит стек с первого указанного шрифта, определит, присутствует ли он в операционной системе. Если таковой есть, то будет использован первый найденный шрифт. Если же ни один из шрифтов не найден, будет использован запасной. В нашем примере это serif.
Основная цель подобрать шрифты, которые отлично смотрятся во всех браузерах, на всех разрешениях и при любом уровне масштабирования.
Есть отличная статья по стеку шрифтов от канадского дизайнера Amrinder Sandhu. К несчастью, стек не работает, если ваши пользователи сидят через мобильные устройства. Android устройства используют шрифты Droid Sans, Droid Serif и Droid Sans Mono, а устройства iOS Helvetica Neue с большим набором различных стилей и насыщенности.
Вы, скорее всего, захотите полностью контролировать отображение страниц в WordPress, а не полагаться на встроенные в операционную систему шрифты. Добиться полного контроля можно с помощью вставки сторонних шрифтов. Рассмотрим типы шрифтов.
Бесплатные шрифты
Подавляющее большинство доступных шрифтов лицензированы тем или иным образом. При покупке компьютера, планшета или мобильного телефона с операционной системой, часть его стоимости составляют лицензии шрифтов. Тем не менее, существует много способов использовать широкий список бесплатных встраиваемых шрифтов.
Встраиваемые шрифты это набор символов, которые загружаются на компьютер пользователя с платформы третьего лица на время просмотра веб-страницы. Как только страница будет закрыта, шрифты удаляются. Такой подход позволяет компаниям-хостингам шрифтов не терять контроль по распространению шрифтов и в то же время отображать шрифт на экране пользователя. Есть множество компаний-хостингов шрифтов. Большинство из них известны:
Google Fonts, возможно, самый популярный сервис. Платформа содержит более 700 хорошо-спроектированных шрифтов, в том числе и lobster.
У Adobe тоже есть свой сервис Edge Web Fonts platform. Они напрямую сотрудничают с сервисом Typekit, вырезав все платные шрифты и оставив только бесплатные.
Другая стоящая платформа это Open Font Library. Насчитывает более 600 шрифтов.
Все шрифты из этих платформ, а также и другие распространяются по лицензии Open Font Licence. Целями OFL являются стимулирование разработки совместных проектов по веб-шрифтам по всему миру, поддержка академических и лингвистических сообществ, а также предоставление бесплатных фреймворков, которыми можно свободно делиться и совместно их улучшать.
Основное преимущество Open Fonts шрифтов в их бесплатном распространении, не нужно ежегодно оплачивать лицензию за использование шрифта на своем сайте. А недостаток в том, что в шрифте могут отсутствоватть некоторые стили или типы жирности.
Платные шрифты
Несмотря на повсеместное использование бесплатных шрифтов, есть множество создателей шрифтов, которые предлагают шрифты премиум класса. К примеру в Type Foundries Archive насчитывается около 300 создателей шрифтов и сайтов, которые предлагают платные шрифты. Притом не все из шрифтов встраиваемые.
Немецкий сайт Font Shop, возможно, самый популярные сервис платных шрифтов в интернете. На сайте есть как высококачественные шрифты, так и весьма необычные наборы символов, таких как фрукты и овощи, вилки и ножи, баночки и бытовая техника для дома.
Если у вас есть аккаунт в Adobe Creative Cloud, то вы получаете доступ к сервису Typekit, которые насчитывает более 450 шрифтов. Загвоздка в том, что при использовании лицензии, шрифты можно использовать только в печатных версиях или на некоммерческих сайтах. Если же вы работаете с клиентами, Adobe предполагает, что вы создали аккаунт и передали его своему клиенту. То есть если клиент не оплатит аккаунт вовремя, то ваш сайт воспользуется резервными шрифтами, т.е. системными.
Добавляем сторонний шрифт в WordPress
Существует масса плагинов, которые позволяют использовать сторонние веб-шрифты в WordPress, к примеру, Easy Google Fonts. Я не буду заострять внимание в этой статье на плагинах. Мы рассмотрим, как сделать это самому, изменив тему. Кроме того, некоторые темы уже идут с различными шрифтами.
В разных сервисах код будет немного отличаться. Я объясню, как это сделать с помощью Google Fonts и Adobe Edge/Typekit. Другие сервисы работают примерно так же. Первым делом не забудьте сделать бэкап сайта (в идеале лучше работать с копией сайта) на случай, если что-то пойдет не так. Все изменения лучше делать в дочерних темах, чтобы при обновлении ничего не удалялось.
Google Fonts
В Google Fonts есть три способа (кроме плагинов) отобразить сторонние шрифты в WordPress: @import, ссылка и JS.
Чтобы выбрать шрифт, нажмите на кнопку быстрого использования. Если требуется, выберите нужные стили, насыщенность и набор стилей.
Дальше необходимо выбрать способ вставки. Самый простой через @import в файле style.css для текущей темы. Не имеет значения, где в файле будет размещен код, но @import будет блокировать загрузку любого другого контента, пока сам не загрузится. Поэтому, если хотите использовать данный метод, то нужно собрать все запросы в один @import.
Второй способ тоже не отличается повышенной сложностью. Он работает с помощью ссылки на шрифт, код располагается во вкладке Standart. Код прописывается в файле header.php в самом верху файла. Потом нужно добавить название вашего шрифта первым в стек шрифтов.
Стоит заметить, что блог Google Web Fonts утверждает, что если тег script находится перед объявлением @font-face, то в IE ничего не будет отображаться, пока не загрузятся файлы шрифтов. И следовательно, если файлы каким-либо образом не загрузились, пользователи IE могут увидеть частично загруженную страницу с пустыми кусками. Размещайте @font-face как можно раньше. Очередной способ это вставка шрифта в файл functions.php. Функция ниже загружает стили шрифтов.
А сам шрифт можно загрузить с помощью JS. Есть доводы как за, так и против использования JS. Но тех, кто предпочитает не использовать JavaScript крайне мало. Код необходимо разместить в файле header.php дочерней темы между тегов head. И снова Google предполагает, что данный код должен располагаться выше всего.
Adobe Edge Web Fonts и Typekit
Добавить шрифты Adobe TypeKit уже немного сложнее. С одной стороны можно воспользоваться Google Fonts, но если вы не самый продвинутый разработчик, то можно воспользоваться плагином Typekit Fonts. После установки плагин появится в настройках. Не забудьте сделать бэкап сайта перед тем, как что-либо менять.
Чтобы воспользоваться Typekit, залогинтесь в Creative Cloud. После выбора шрифта, создайте набор. Задайте имя набору, добавьте домен сайта. После этого сгенерируется код JS. Скопируйте и сохраните этот код в Notepad или TextEdit.
Следующий шаг – выбрать ваш шрифт, добавить его к вашему сайту и опубликовать. Добавляйте сколь угодно много шрифтов и публикуйте их.
После публикации, зайдите в плагин Typekit Fonts.
Вставьте код, который сохранили в текстовом файле.
По желанию добавьте CSS стили. Я у себя добавил стили для заголовков постов H1, подзаголовков H2. Своим селекторам лучше всего задавать уникальные имена, чтобы они не конфликтовали с темой. Сделать это можно с помощью панели разработчика в браузере. Не забывайте обновлять страницу, шрифт может стать доступным спустя пару минут после добавления на сайт.
Также рекомендуется всегда прописывать свойства font-weight и font-style для своего шрифта. Эти свойства помогут настраивать шрифт на различных платформах.
Заключение
Сделать свой сайт необычным можно, просто добавив на него сторонний шрифт. Данный способ также поможет выделить бесплатную тему среди двойников.
Однако не добавляйте огромное количество различных шрифтов просто потому, что вы можете. Используйте не более двух, трех шрифтов. Как правило, это наиболее оптимальный вариант, не только с точки зрения производительности, но и с дизайнерской точки зрения.
Google предлагает облегченный способ. От вас требуется нажать всего одну кнопку. Графический дизайн это искусство, оттачиваемое годами. Но можно ускорить этот процесс, добавив парочку хороших веб-шрифтов, и теперь ваш сайт увидят все.
Автор: Andrew Renaut
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
