Как использовать шрифты Google с WordPress?

Современная сеть - это все о пользовательском опыте. Компании вкладывают много времени и денег, чтобы посетители их веб-сайтов получали наилучшие впечатления от просмотра их веб-сайтов.

Текстовое представление играет важную роль в эстетике сайта. Неважно, насколько хорошее качество вашего контента; если он неприятен для чтения и слишком загроможден для читателей, то все ваши усилия будут напрасны.

Хотя вам доступен ряд типографских опций, самый простой способ получить доступ к сотням профессиональных шрифтов (бесплатно) - использовать Google Fonts на вашем веб-сайте WordPress.

В этом посте я представлю вам пошаговые инструкции, чтобы узнать, как добавить шрифты WordPress Google на свой веб-сайт вручную и с помощью плагина Easy Google Fonts . Я также покажу вам лучшие шрифты, которые вы можете использовать для улучшения читаемости контента вашего сайта.

1- Что такое шрифты Google для WordPress и почему их следует использовать?

Прежде чем мы начнем, давайте быстро рассмотрим, что такое шрифты Google, а также основные преимущества их использования на вашем веб-сайте WordPress.

Google Fonts - это библиотека бесплатных лицензионных шрифтов, запущенная в 2010 году. Вы можете использовать удивительную библиотеку Google Fonts, вызвав предоставленный API. Интересен тот факт, что вы можете использовать 877 оптимизированных для Интернета шрифтов - бесплатно. Это невероятно. Он имеет интерактивный веб-каталог, который позволяет вам искать определенные типы шрифтов и тестировать их в своем веб-браузере.

Использование шрифтов WordPress Google Fonts имеет ряд преимуществ. Их можно использовать бесплатно (даже для коммерческих проектов), предварительно размещать (чтобы они не занимали ресурсы вашего сервера) и загружать (вы можете использовать их в печати).

Существует большое количество веб-сайтов, которые в настоящее время используют шрифты Google в WordPress в своих интересах. Все современные темы поддерживают использование шрифтов Google.

Если вы готовы обновить типографику своего сайта с помощью простых в использовании веб-шрифтов, все, что вам нужно сделать, это найти правильные шрифты и использовать их на своем веб-сайте WordPress.

2- Как добавить шрифты Google в WordPress вручную

Google Fonts берет на себя большую часть тяжелой работы по встраиванию семейств шрифтов на ваш сайт. Это онлайн-библиотека, которую можно вызывать в любом веб-проекте, как и любой другой скрипт JS или CSS.

В этом разделе я продемонстрирую вам, как вручную установить Google Fonts на веб-сайт WordPress.

Шаг 1. Найдите шрифт, который хотите добавить на свой веб-сайт

Для начала просмотрите каталог Google Fonts и выберите шрифт, который хотите использовать на своем веб-сайте WordPress. Если у вас уже есть определенный шрифт, вы можете просто найти его, используя поле поиска на правой боковой панели.

Вы также можете фильтровать шрифты по категориям, языкам, количеству стилей, толщине, наклону и ширине или сортировать их по дате добавления, по алфавиту, тенденциям или по популярности.

• Это шрифты с маленькими линиями, прикрепленными к концам букв, например Times New Roman и Courier .
• Без засечек. Шрифты, у которых нет маленьких линий в конце букв, - это шрифты без засечек, например Helvetica и Roboto .
• Шрифты дисплея в основном используются для большого текста, например заголовков.
• Рукописные шрифты, например Pacifico .
• Шрифты с одинаковым интервалом между символами, например Source Code Pro .

Одним из лучших преимуществ использования функции интерактивного каталога Google Fonts является то, что вы можете быстро просмотреть интересующие вас шрифты. Все, что вам нужно сделать, это щелкнуть поле шрифта и ввести в него текст.

В рамках этого руководства я выберу Open Sans .

Шаг 2: Добавьте шрифты к вашему выбору

Теперь, когда мы знаем, какой шрифт мы выберем, давайте добавим его к нашему выбору. Вы можете сделать это, щелкнув знак плюса (+) в правом верхнем углу поля семейства шрифтов.

Вы можете добавить к своему выбору столько семейств шрифтов, сколько захотите. Когда все будет готово, нажмите черную полосу X Family Selected в нижней части экрана, чтобы просмотреть свой выбор.

Шаг 3. Настройте шрифт

Панель « Выбранное семейство X» открывает окно с двумя вкладками - « Встроить» и « Настроить» . Прежде чем встраивать семейство шрифтов в наш веб-сайт WordPress, мы потратим немного времени, чтобы немного его настроить.

На экране « Настройка» установите флажки для стилей и языков, которые вы хотите использовать на своем веб-сайте.

Имейте в виду, что чем больше стилей шрифтов и языков вы выберете, тем больше времени потребуется для загрузки страниц вашего сайта. Вы заметите индикатор времени загрузки на том же экране, который позволяет узнать, замедлит ли ваш выбор время загрузки.

Чтобы наш выбор шрифтов не влиял на время загрузки страницы нашего сайта, мы решили выбрать простой - легкий 300 и обычный 400 .

Шаг 4. Вставьте шрифты Google на свой веб-сайт WordPress

Есть несколько способов добавить собственный шрифт в WordPress. Мы покажем вам, как это сделать, используя функцию wp_enqueue_style (), поскольку это рекомендуемый подход для веб-сайтов WordPress.

Начните с возврата на вкладку « Встраивание » и скопируйте ссылку (URL) выбранного шрифта в буфер обмена. В нашем случае полный URL-адрес: https://fonts.googleapis.com/css?family=Open+Sans:300,400 .

Затем войдите в свою панель управления WordPress и внутри Appearance перейдите в Editor и откройте файл functions.php вашей активной темы с помощью FTP-клиента и добавьте в него следующий код.

 function add_google_fonts () {

wp_enqueue_style ('add_google_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300,400', false);}

add_action ('wp_enqueue_scripts', 'add_google_fonts');

Примечание. Вам нужно будет заменить URL своим собственным.

Вы можете начать использовать только что добавленный шрифт, используя параметры оформления вашей темы (если они поддерживаются) или добавив код в основную таблицу стилей вашей активной темы. Например, если бы мы хотели изменить все заголовки H2 на наш новый шрифт, наш код мог бы выглядеть примерно так:

 h2 {

семейство шрифтов: «Open Sans», без засечек;

}

Я успешно обновил свой WordPress с помощью шрифтов Google. Вполне возможно, что шрифты Google могут не работать по каким-то странным причинам, и, чтобы столкнуться с этим, я должен обратиться к набору шрифтов по умолчанию, который может отображаться в качестве резервной копии. Но это случается довольно редко.

Почему скорость важна для SEO и UX?

Эти советы экспертов покажут вам, как повысить скорость ваших веб-сайтов WordPress.

Я согласен с Условиями обслуживания и Политикой конфиденциальности Cloudways

Получите электронную книгу прямо сейчас!

Спасибо

Ваша электронная книга находится в папке "Входящие".

Для этого просто добавьте локально размещенные шрифты по умолчанию, такие как Georgia, Cambria или Courier.

3- Как добавить шрифты Google в WordPress с помощью плагина

Для некоторых ручная интеграция WordPress Google Fonts может быть неприемлемой. Не волнуйтесь. Есть еще один (более простой) способ добавить шрифты Google на ваш сайт WordPress. Через плагин.

В этом разделе я покажу вам, как вы можете интегрировать Google Fonts в WordPress с помощью плагина Easy Google Fonts .

Шаг 1. Установите и активируйте плагин

Войдите в свою админ-панель WordPress и перейдите в Плагины > Добавить новый . Найдите Easy Google Fonts и установите его на свой веб-сайт.

После установки плагина нажмите кнопку « Активировать» , чтобы начать его использовать.

Шаг 2. Начните использовать шрифты Google

После того, как вы активируете плагин на своем веб-сайте, он автоматически поставит в очередь таблицы стилей для шрифтов Google, которые вы выберете для использования. Чтобы начать работу, перейдите в Внешний вид > Настроить в панели администратора WordPress.

Вы заметите, что в настройщик WordPress был добавлен новый пункт меню под названием « Типография» .

Он позволяет вам управлять настройками типографики ваших абзацев и различных заголовков (от H1 до H6).

Допустим, вы хотите отредактировать шрифт Paragraphs на своем веб-сайте, плагин Easy Google Fonts позволяет вам настраивать его стили, внешний вид и положение. Давайте посмотрим на различные варианты стилей, которые он предлагает.

На вкладке « Стили » вы можете настроить свой сценарий, семейство шрифтов, толщину шрифта, оформление текста и преобразование текста. Опция семейства шрифтов дает вам доступ к сотням шрифтов Google, классифицируемых как стандартные веб-шрифты , шрифты Google Serif, шрифты Google Sans Serif, шрифты Google Display , рукописные шрифты Google и моноширинные шрифты Google .

Итак, если бы мы хотели использовать Open Sans , мы бы установили параметр сценария на Latin , параметр семейства шрифтов на Open Sans и вес шрифта на Regular (что эквивалентно Regular 400 ).

Просто проверьте, как изменился шрифт на экране предварительного просмотра? Одним из основных преимуществ использования плагина Easy Google Fonts является то, что вы можете в реальном времени предварительно просмотреть, как выглядят ваши сообщения и страницы, когда вы выбираете шрифт для использования.

4- Лучшие шрифты для использования

Когда дело доходит до выбора шрифтов с помощью Google Fonts, нет предела. Вы, как веб-мастер, вправе выбрать тот шрифт, который вы сочтете подходящим для ваших читателей. Однако есть некоторые шрифты, которые популярны благодаря удобочитаемости.

Давайте посмотрим на лучшие шрифты Google, которые широко используются и обеспечивают лучшую читаемость.

1. Лора

Lora - одно из широко используемых семейств шрифтов из-за его удобочитаемости и разнообразия.

2. Дисплей Playfair

Это семейство шрифтов обеспечивает лучшую читаемость текста и подходит как для Интернета, так и для печати.

3. Archivo

Этот шрифт принадлежит к семейству гротескных шрифтов без засечек. Он имеет чистый вид, подходящий для основного текста.

4. Робото

Roboto - один из наиболее часто используемых шрифтов в современной сети. Он отлично выглядит с минималистичным веб-дизайном и обеспечивает отличную читаемость для пользователей.

5. Монтсеррат

Монтсеррат уходит корнями в городскую типографику двадцатого века. Еще одно очень популярное семейство шрифтов, которое имеет несколько вариантов.

6. Рубик

Очень чистый, Rubik - это семейство шрифтов без засечек, которое обслуживает более 470 000 веб-сайтов по всему миру.

7. Source Sans

Вы, должно быть, использовали семейство шрифтов Source Sans, поскольку оно имеет более 4,18 миллиарда итераций через Google Fonts API.

8. Лато

Lato также является шрифтом без засечек и считается профессиональным и четким шрифтом веб-мастерами. Он используется почти в каждой позиции контента.

9. PT Serif

Этот шрифт используют более миллиона веб-сайтов, поэтому PT Serif является одним из наиболее широко используемых шрифтов Google. Он подходит как для Интернета, так и для печати документов.

10. Open Sans

Шрифт Open Sans наиболее близок к человеческому письму, что облегчает чтение как в Интернете, так и на бумаге. API Google Fonts обслужил этот шрифт более 28,5 миллиардов раз всего за неделю!

Доступно множество других шрифтов Google для веб-сайтов WordPress. Будьте мудры при выборе семейства шрифтов, поскольку оно может иметь как положительное, так и отрицательное влияние на читателей вашего сайта.

5- Лучшие практики использования шрифтов Google на веб-сайте

Интеграция WordPress Google Fonts - это не ракетная наука, но всегда есть два способа выполнить любую задачу - хороший способ и лучший способ.

Давайте рассмотрим лучшие практики использования шрифтов Google в WordPress.

- Ограничение веса шрифта: выбор полного набора веса шрифта заманчиво, но у него есть свои недостатки. Для каждого варианта API становится тяжелее и требует больше времени для загрузки полного набора весов шрифтов.

Обычно он загружается в начале веб-страницы и, если он не оптимизирован, может замедлить начальное время загрузки вашей веб-страницы.

-Host Fonts Local: Шрифт Google - это онлайн-библиотека, размещенная в другом месте. Хотя это минимально влияет на производительность вашего сайта, однако в случае его недоступности вы все равно сможете использовать выбранные шрифты Google на сервере, если они размещены локально.

-Доступность важна: это больше не вариант для оптимизации вашего веб-сайта для людей с нарушениями зрения. Шрифты Google позволяют стилизовать шрифт так, как это наиболее удобно для посетителей этого типа.

Используйте контраст, который легко читается на экранах большинства размеров и типов и не утомляет глаз читателя. Использование очень ярких или очень светлых цветов не идеально. Выберите цвет и размер, наиболее подходящие для большинства читателей.

Заключение

Использование шрифтов Google в WordPress может помочь вам быстро изменить внешний вид вашего веб-сайта. Если вы пытаетесь идти на профессионально выглядящий сайт или одно удовольствие, скорее всего , Google Fonts имеет идеальный шрифт для вас.

Мы показали вам, как вы можете добавить шрифты Google на свой сайт вручную, используя функцию wp_enqueue_style () и плагин Easy Google Fonts. Надеюсь, теперь у вас хорошие возможности, чтобы самому продвинуться дальше.

Вы когда-нибудь использовали библиотеку шрифтов на своем веб-сайте WordPress? Мы будем рады услышать от вас, поэтому дайте нам знать, оставив комментарий ниже!