В этой справочной статье WordPress я шаг за шагом проведу вас через процесс добавления пользовательских шрифтов в ваши блочные темы WordPress. Это означает, что вы можете добавить ЛЮБЫЕ шрифты в ЛЮБУЮ тему, например, добавить Google Fonts в тему Twenty Twenty Three.
Я покажу вам, как выполнить эту задачу с помощью плагина Create Block Theme, разработанного непосредственно командой разработчиков WordPress. Это делает плагин сверхлегким, высокопроизводительным и очень простым в использовании с темами блоков.
С помощью этого метода вы можете либо ссылаться на шрифты (т. е. ссылаться на Google Fonts), либо встраивать шрифты локально на свой сайт (для повышения производительности сайта). Давайте погрузимся в это!
Видео: добавление пользовательских шрифтов в WordPress
1. Установите плагин «Создать блочную тему».
Для начала вам нужно войти в свою административную область WordPress, которая приведет вас к панели инструментов. Оттуда перейдите в «Плагины»> «Добавить новый» из главной навигации (красная стрелка на изображении выше).
Найдите плагин «Create Block Theme», используя панель поиска в правом верхнем углу (обведена зеленым на фотографии выше). Когда появится плагин Create Block Theme, нажмите кнопку «Установить сейчас», чтобы установить его на свой сайт (красная стрелка).
Затем нажмите кнопку «Активировать», чтобы активировать плагин.
2. Отключить плагин безопасности (временно)
Чтобы остальная часть этого процесса прошла гладко, вам необходимо временно отключить все установленные вами подключаемые модули безопасности, которые блокируют возможность пользователей редактировать темы или подключаемые модули.
В моем конкретном случае я использую плагин SG Security (который поставляется со всеми веб-сайтами WordPress). размещенный через Siteground — хост, который я настоятельно рекомендую). Я точно знаю, что этот плагин мешает процессу добавления пользовательских шрифтов, поэтому я отключу параметр, который мешает.
В этом случае я перейду к разделу «Безопасность сайта» плагина SG Security, используя основную навигацию (красная стрелка на изображении выше).
Затем я прокрутю вниз до параметра «Отключить редактор тем и плагинов» (выделено зеленым на изображении выше). Вы увидите переключатель справа от этой опции — щелкните переключатель, чтобы отключить эту функцию (красная стрелка). Вы должны увидеть всплывающее сообщение «Успех» в правом углу (синяя стрелка).
Поскольку наш плагин безопасности временно отключен, мы можем перейти к следующему шагу выбора и загрузки шрифтов, которые мы хотим использовать на нашем сайте.
Есть два варианта использования пользовательских шрифтов в WordPress.
3. Выберите пользовательские шрифты для WordPress (связанные шрифты Google)
Первый вариант — ссылка на шрифты на стороннем сайте, Google шрифты. Этот вариант проще и требует меньше времени для настройки, но замедляет скорость загрузки страницы вашего сайта. Это также ограничивает вас шрифтами, доступными в Google Fonts (хотя Google предлагает множество отличных бесплатных шрифтов). Если вы менее технически подкованы и не возражаете против использования Google Fonts, я рекомендую этот вариант.
Для начала перейдите в «Внешний вид»> «Управление шрифтами темы» в главном меню навигации (красная стрелка на изображении выше).
В рабочей области «Управление шрифтами темы» вы увидите все шрифты по умолчанию, установленные в настоящее время в WordPress (выделены зеленым на изображении выше). Ваши шрифты также перечислены в правой части рабочей области вместе с различными вариантами каждого шрифта и размером файла для каждого варианта шрифта (обведены синим цветом).
Чтобы добавить новый шрифт в тему, нажмите кнопку «Добавить шрифт Google» (красная стрелка).
Щелкните раскрывающийся список «Выбрать шрифт» и найдите шрифт Google, который вы хотите добавить на свой сайт (шрифты расположены в алфавитном порядке). Если вы не уверены, как выглядит каждый шрифт, я рекомендую просмотр веб-сайта Google Fonts исследовать шрифты и тестировать их. Найдя нужный шрифт, выберите его в раскрывающемся списке (синяя стрелка).
Теперь вы увидите список всех доступных вариантов, которые вы можете установить в своей теме для этого шрифта. Вы можете установить флажок рядом с отдельными вариантами или установить верхний флажок (красная стрелка на изображении выше), чтобы выбрать все варианты. Вы увидите список выбранных вами вариантов вместе с размером их файла в правой части экрана. Когда вы будете готовы, нажмите «Добавить шрифты Google в свою тему» (зеленая стрелка).
Теперь вы должны увидеть сообщение в верхней части рабочей области о том, что шрифт был установлен в вашу тему (в данном случае в тему Twenty-Twenty Three). Затем вы можете щелкнуть ссылку «Управление шрифтами» внутри окна сообщения об успешном завершении или щелкнуть маленькую стрелку назад (красная стрелка на изображении выше), чтобы вернуться в рабочую область «Управление шрифтами темы».
Теперь вы увидите только что установленное семейство шрифтов в списке с остальными шрифтами вашей темы (красная стрелка на изображении выше). Вы также увидите свое семейство шрифтов и все связанные с ним варианты шрифтов в правой части рабочей области (выделены зеленым цветом).
4. Встраивание пользовательских шрифтов для WordPress (локальные шрифты для лучшего SEO)
Второй вариант добавления шрифтов на ваш веб-сайт WordPress — «встроить» или «локально разместить» ваши шрифты. Другими словами, ваши файлы шрифтов будут расположены на том же веб-сервере, на котором размещен ваш веб-сайт.
Преимущество этого метода в том, что он не требует получения шрифтов из стороннего домена. В результате ваши шрифты загружаются быстрее, и, следовательно, ваша веб-страница загружается быстрее. Быстрая загрузка веб-страниц лучше для пользователей, что означает, что это может помочь вашему сайту занять более высокое место в поисковых системах и получить больше трафика.
Другими словами, встроенные шрифты лучше подходят для SEO (поисковая оптимизация).
Хотя этот метод требует нескольких дополнительных шагов, он по-прежнему довольно прост и использует тот же плагин, который мы установили ранее (плагин Create Block Themes).
Чтобы установить шрифты локально, начните с перехода к «Внешний вид»> «Управление шрифтами темы» в главном меню навигации (если вы еще не сделали этого на последнем шаге — синяя стрелка на изображении выше). Далее нажмите кнопку «Добавить локальный шрифт» в правом верхнем углу рабочей области (красная стрелка).
Вы попадете в область «Локальные шрифты», где сможете выбрать файл со своего компьютера для загрузки в свою тему. Под кнопкой «Выбрать файл» вы увидите список поддерживаемых форматов файлов шрифтов. Вы можете получить эти форматы с любого веб-сайта надежных шрифтов, включая Google Fonts.
Найдите и загрузите нужный шрифт из Google Fonts
Я перейду к Google Fonts и воспользуюсь строкой поиска (красная стрелка) для поиска нужного мне шрифта — в данном случае шрифта «Катамаран». Как только шрифт появится в результатах, я нажму на него, чтобы просмотреть страницу шрифта (зеленая стрелка).
Затем я нажму кнопку «Загрузить семейство», чтобы загрузить этот шрифт и все его варианты на свой компьютер. Вы можете прокрутить страницу шрифта вниз, если хотите увидеть все доступные варианты этого шрифта.
Нажмите «Сохранить», чтобы сохранить zip-файл шрифта на свой компьютер.
Разархивируйте папку со шрифтами, чтобы получить доступ к файлам шрифтов
После завершения загрузки щелкните стрелку рядом с завершенной загрузкой (красная стрелка) и нажмите «Показать в папке» (зеленая стрелка).
Щелкните правой кнопкой мыши zip-файл в проводнике и выберите «Извлечь все».
Появится всплывающее окно, показывающее, где извлекаются шрифты (красная стрелка). Вы можете изменить это местоположение, если хотите, в противном случае нажмите кнопку «Извлечь» (зеленая стрелка). Это распакует папку и создаст новый файл на вашем компьютере со всеми разархивированными файлами шрифтов. Эта папка должна открыться автоматически.
Если вы загрузили файлы шрифтов с помощью Google Fonts, войдите в папку с пометкой «static», чтобы просмотреть все файлы шрифтов. В противном случае просто найдите файлы OTF, TTF, WOFF или WOFF2.
Внутри этой «статической» папки вы увидите список всех вариантов шрифта, которые мы скачали для шрифта Catamaran из Google Fonts. Всего существует 9 вариантов, и мы можем либо загрузить их все на наш веб-сайт, либо только те варианты, которые нам нужны. Нажмите на папку в проводнике (зеленая стрелка), затем щелкните правой кнопкой мыши и выберите «Копировать».
Загрузите свои собственные шрифты в WordPress
Вернитесь в WordPress, где у вас открыта рабочая область «Локальные шрифты». Нажмите кнопку «Выбрать файл» (красная стрелка на изображении выше), чтобы выбрать шрифты. Вы можете вручную перейти к месту на вашем компьютере, где хранятся ваши шрифты. Или просто нажмите на адресную строку проводника (синяя стрелка), удалите адрес, который в данный момент там, затем щелкните правой кнопкой мыши и выберите «Вставить» (зеленая стрелка). Это вставит адрес, который вы скопировали на предыдущем шаге. Нажмите клавишу ввода, и вы попадете в папку с вашими шрифтами.
Вы должны загружать свои варианты шрифта по одному. В этом примере я просто загружу вариант шрифта «Catamaran-Regular», щелкнув его (зеленая стрелка), а затем нажав кнопку «Открыть» (красная стрелка).
Теперь вы должны увидеть информацию для «ИМЯ ШРИФТА», «СТИЛЬ ШРИФТА» и «ВЕС ШРИФТА», а также предварительный просмотр шрифта с правой стороны. Нажмите «Загрузить шрифт в свою тему» (красная стрелка), чтобы загрузить вариант шрифта.
Просмотр пользовательских шрифтов темы
Теперь вы должны увидеть сообщение об успешном завершении в верхней части рабочей области (обведено зеленым на изображении выше). Поздравляем — ваш пользовательский шрифт теперь загружен в вашу тему как локальный шрифт! Вы можете продолжать нажимать «Выбрать файл» и загружать столько вариантов шрифта, сколько хотите.
По завершении щелкните ссылку «Управление шрифтами» внутри окна сообщения об успешном завершении или стрелку назад (обозначена красной стрелкой), чтобы вернуться в рабочую область «Управление шрифтами темы».
Теперь вы увидите новое семейство шрифтов «Catamaran» в списке с остальными семействами шрифтов вашей темы (красная стрелка). Кроме того, вы увидите семейство шрифтов и любые установленные вами варианты в правой части окна «Управление шрифтами темы» (выделены зеленым цветом).
5. Измените шрифты вашей темы на собственные шрифты
Теперь, когда у вас установлены новые шрифты, пришло время для веселой части!
Чтобы изменить шрифты вашей темы на ваши пользовательские шрифты, перейдите в редактор сайта, выбрав «Внешний вид»> «Редактор» (красная стрелка на изображении выше).
Щелкните в любом месте области основного содержимого (красная стрелка) редактора сайта, чтобы открыть элементы управления.
В верхнем меню нажмите на значок «Стили» (синяя стрелка). Затем нажмите «Типографика» (красная стрелка).
В разделе «Элементы» вы можете изменить шрифт текста, ссылок, заголовков или кнопок. Я выберу опцию «Заголовки» для этого примера.
Теперь вы увидите раскрывающийся список в разделе «Типография», где вы можете выбрать любой из шрифтов вашей темы (красная стрелка). Здесь перечислены шрифты «Neuton» и «Catamaran», которые я добавил для этого урока. Я выберу «Neuton» в качестве шрифта заголовка.
Нажмите кнопку «Сохранить» в правом верхнем углу, чтобы сохранить изменения.
Нажмите «Сохранить» еще раз (красная стрелка), и ваш пользовательский шрифт теперь будет сохранен для всех заголовков на вашем сайте!
Затем вы можете щелкнуть ссылку «Просмотр»> «Просмотреть сайт» в правом верхнем углу редактора сайта (красные стрелки на фотографии выше), чтобы увидеть, как выглядит ваш сайт с новым шрифтом. Вернитесь в редактор сайта и повторите этот процесс для любых других элементов, шрифт которых вы хотите настроить.
Чтобы вернуться в административную область WordPress, нажмите на логотип в верхнем левом углу редактора сайта (зеленая стрелка), затем еще раз нажмите на логотип.
6. Как удалить пользовательские шрифты из WordPress
Чтобы удалить любой из ваших пользовательских шрифтов, начните с возврата в «Внешний вид»> «Управление шрифтами темы».
Вы можете удалить все семейство шрифтов, наведя указатель мыши на правую часть имени семейства шрифтов и щелкнув появившийся значок корзины (синяя стрелка). Или наведите указатель мыши на отдельные варианты шрифта и щелкните значок корзины (варианты шрифта находятся внутри выделенной зеленым цветом области). Вы также можете щелкнуть ссылку «Удалить семейство шрифтов», чтобы удалить любое семейство шрифтов (фиолетовая стрелка).
Вот и все для этого урока! Если вам понравилось, вы можете проверить мой другой Справочные статьи WordPress или записаться на мой Мастер-класс WordPress на Udemy.
