Данный кринкаст демонстрирует как встроить шрифт из библиотеки шрифтов [Google Webfonts]. Если вы не уверены, что вашему сайту нужны какие-то особенные шрифты, рекомендуем ознакомиться со статьей: «Эффективный сайт некоммерческой организации. Веб-шрифты»
Для демонстрации предполагается, что сайт работает на WordPress и использует тему по умолчанию — TwentyTwelve. Перед применением иллюстрируемого алгоритма к другим темам, убедитесь, что они не используют какой-либо другой механизм встраивания шрифтов, например, прямое встраивание с помощью директивы font-face или [Cufon], иначе возможны ошибки из-за конфликтующих технологий.
Для успешного применения приведенного в скринкасте алгоритма необходимо базовое знакомство с языком стилей [CSS]. Как минимум, вы должны знать, как каскад и структура документа влияют на применение правил стилей, а также как с помощью CSS задаются параметры текста — шрифт, размер кегля, стиль, насыщенность и т.п. Если эти основы вам совсем незнакомы — рекомендуем взять [несколько элементарных онлайн-уроков].
Скринкаст иллюстрирует следующую последовательность действий:
- В библиотеке [Google Webfonts] выбирается нужный шрифт.
- С помощью интерфейса Quick-use устанавливается необходимый набор символов и генерируется код, подгружающий шрифт.
- Код (на основании директивы @import) копируется в файл стилей темы (style.css) с помощью встроенного редактора файлов WordPress. Директива импорт должна располагаться самой первой, прежде всех других правил в этом файле. Сервис Google предоставляет также альтернативные варианты внедрения кода, подгружающего шрифт: тэг <link> для размещения в заглавной части шаблона (между тэгами <head></head>) и способ с использованием JavaScript. Примеры использования этих вариантов приводятся в [справочной системе Google](https://developers.google.com/webfonts/docs/getting_started).
- С помощью встроенного редактора файлов WordPress указываются правила CSS, применяющие подгруженный шрифт к элементам сайта, в частности, основному заголовку (h1).