Кастомизация

Google шрифты в WordPress

Как всегда, рад приветствовать читателей на страницах WPNICE. Разговор пойдет сегодня о шрифтах. Некоторые не придают шрифтам большого значения — была бы кириллица, да и ладно. А зря, друзья мои, зря! Правильно подобранные шрифты вообще и Google шрифты в частности способны сильно украсить практически любой сайт.

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

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

WP Google Fonts

А вы вообще знали, что у Google есть каталог, наполненный сотнями бесплатных, доступных для скачивания веб-шрифтов? Вы можете зайти на сайт с шрифтами Google, ознакомиться с превью всех доступных шрифтов, составить список шрифтов, которые вам понравились и затем использовать их на своем сайте. Не забудьте так же в левом столбце включить Script: — Cyrillic для сортировки шрифтов поддерживающих кириллицу.

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

WP Google Fonts

Влияние на время загрузки сайта

Этот плагин позволяет добавить только 6 шрифтов из каталога веб-шрифтов Google, что, в общем-то, хорошо, так как большое количество шрифтов тормозит загрузку вашего WordPress-сайта. К счастью, когда вы просматриваете и выбираете шрифты в «Google-шрифтах», вы видите, как выбранный шрифт влияет на скорость загрузки страницы, что поспособствует правильному выбору.

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

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

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

Supreme Google Webfonts

Еще один бесплатный плагин, который работает с сервисом Google Fonts, но скорее позволяющий выбирать шрифты для постов, нежели для всей темы в целом. Сразу после установки плагина, в текстовом редакторе появятся два новых поля, с помощью которых вы сможете выбирать шрифты из каталога веб-шрифтов Google и изменять размер текста. Развернув выпадающий список, вы сможете «примерить» тот или иной шрифт к своему сайту. При этом нет необходимости постоянно заходить на сайт Google Fonts, чтоб посмотреть, как какой-либо шрифт будет смотреться на сайте, как это было в случае плагина, описанного выше.

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

SUPREME GOOGLE WEBFONTS

FontMeister

Этот плагин позволяет использовать на вашем сайте шрифты не только с сайта Google Fonts, но и шрифты с ресурсов Typekit, Fontdeck, Font Squirrel, которые представляют собой платные каталоги (разве что есть бесплатные шрифты от Squirrel).

После установки плагина FontMeister вам нужно будет указать ключи API тех сервисов, к шрифтам которых вы хотите получить доступ.

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

Когда вы работаете с Font Squirrel, шрифты сначала необходимо скачать в консоль WordPress, а потом уж использовать их в оформлении сайта. Скачать шрифты легко, но, только в том случае, если вам не нужно очень много шрифтов, в противном случае – это ненужный расход ресурсов и торможение работы сайта. Доступна функция предпросмотра уже скачанных, добавленных и в список, шрифтов. Так же шрифты можно внедрять в тему, используя селекторы.

Если вы не планируете использовать те сервисы, с которыми работает плагин, я бы посоветовал вам другие плагины для более простой установки и использования Google Fonts.

FONTMEISTER

wp-Typography

Несмотря на то, что этот плагин уже некоторое время не обновлялся, он стабильно работает с WordPress версии 3.5.2. После установки этого плагина, вы получите полный контроль над внешним видом текста, присутствующим в стандартной сборке WordPress.

Этот плагин способен на многое, например, он изменяет двойные кавычки согласно типографическим правилам, меняет знак минуса на тире или дефис, расставляет диакритические знаки в таких словах, как crème brûlée и вносит настройки в текст ссылок и поля для ввода текста.

Изменения, внесенные на странице настройки плагина, применяются ко всему вашему WordPress сайту.

Плагин очень хорош, если вы хотите получить тотальный контроль над всем текстом вашего сайта. Кроме того плагин отлично понимает кириллицу и прекрасно с ней справляется.

WP-TYPOGRAPHY

Заключение

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

Некоторые люди считают, что веб-сайт на 95 % состоит из текста, и независимо от того согласны ли вы с этим убеждением или нет, текст, все равно, остается одной из самых важных визуальных составляющих любого веб сайта.

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

Метки

Related Articles

6 thoughts on “Google шрифты в WordPress”

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

  2. Дмитрий а вы пользуетесь какими-либо плагинами для добавления шрифтов на этот сайт? Или все настройки сделаны со шрифтами предусмотренными в данном шаблоне сайта?

    1. Тут стандартный Arial использую везде, хотя можно настроить и гуглшрифты в шаблоне при желании.

      1. Дмитрий, может подскажете мне? В настройках шрифтов в моей теме Jarida нет шрифта Arial отдельной строкой, есть только строка с 3-мя шрифтами —
        «Arial, Helvetica, sans-serif» — https://pp.vk.me/c622030/v622030792/26795/ctnxdY6reoo.jpg
        И так со всеми основными шрифтами…

        Я вот для примера проставил во всех возможных настройках этот шрифт — «Arial, Helvetica, sans-serif»
        и потом начитаются такие пляски, что в заголовке статьи у меня стоит «Arial» сама статья тоже «Arial» а вот тэг H2 в середине статьи почему-то ставит «Helvetica» — https://pp.vk.me/c622030/v622030792/2678c/Howfi0fkBd8.jpg

        Как заставить тему выбирать везде только «Arial»?

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

  3. Пропишите в Custom CSS —

    .entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 {
    font-family: Arial,Helvetica,sans-serif;
    }

    Хотя, по моему, разница не большая.
    Начертание шрифтов в виджетах и меню разные потому что у Вас Jarida, а у меня стоит Sahifa. Тут немного по другому.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Close

Обнаружен Adblock

Уважайте труд вебмастера. Пожалуйста, отключите свой блокировщик рекламы.