В статье «Эффективный сайт некоммерческой организации: Веб-шрифты» мы рассказали о том, почему правильно подобранные шрифты очень важны для сайта проекта. Данный скринкаст демонстрирует как встроить уже имеющийся шрифт формата OpenType для использования на сайте. Для демонстрации предполагается, что сайт работает на WordPress и использует тему по умолчанию — TwentyTwelve.
Перед применением иллюстрируемого алгоритма к другим темам, убедитесь, что они не используют какой-либо другой механизм встраивания шрифтов, например [Google Fonts] или [Cufon], иначе возможны ошибки из-за конфликтующих технологий.
Для успешного применения приведенного в скринкасте алгоритма необходимо базовое знакомство с языком стилей (CSS). Как минимум, вы должны знать, как каскад и структура документа влияют на применение правил стилей, а также как с помощью CSS задаются параметры текста — шрифт, размер кегля, стиль, насыщенность и т.п. Если эти основы вам совсем незнакомы — рекомендуем взять несколько элементарных онлайн уроков.
Скринкаст иллюстрирует следующую последовательность действий:
- Исходный шрифт — в формате OpenType — конвертируется в несколько веб-форматов с помощью генератора [Fontsquirrel]. Получаемый в результате .zip архив сохраняется на компьютере.
- После распаковки, файлы шрифтов размещаются на сервер с помощью FTP программы (например, бесплатный кросс-платформенный FTP-клиент [Filezilla]), в папку стилей темы TwentyTwelve (стандартный путь к папке: папка_установки_wordpress/wp-content/themes/twentytwelve/css/)
- С помощью встроенного редактора файлов WordPress редактируется файл темы (style.css) для размещения в нем директивы @font-face, подгружающей шрифты. Размещаемый код автоматически создается генератором Fontsquirrel и содержится в файле stylesheet.css ([подробнее о применении синтаксиса @font-face].
- С помощью встроенного редактора файлов WordPress указываются правила CSS, применяющие подгруженный шрифт к элементам сайта, в частности, основному заголовку (h1).