6 простых способов добавить шрифты Google в WordPress для пользовательской типографии

  1. Что такое Google шрифты?
  2. Краткая история веб-типографии
  3. Введите Google Fonts
  4. Как добавить Google шрифты в WordPress вручную
  5. 1. Найдите правильный шрифт
  6. 2. Выберите шрифт
  7. 3. Выберите стили и дополнительные наборы символов
  8. 4. Вставьте шрифты на свой сайт WordPress.
  9. 5. Назовите Google Fonts в своей таблице стилей
  10. Добавление Google шрифтов в WordPress с помощью плагина
  11. 1. Установите плагин
  12. 2. Изменить шрифты
  13. 3. Добавление ваших собственных классов CSS
  14. Добавление пользовательских шрифтов в WordPress - не так сложно, как кажется

Все хотят, чтобы их сайт был уникальным. Они не хотят зацикливаться на стандартном варианте, как все, но выражают свой стиль и индивидуальность на своем сайте.

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

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

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

Готовы добавить пользовательские шрифты в WordPress? Тогда поехали.

Что такое Google шрифты?

Прежде чем мы перейдем к техническим деталям, давайте сначала поговорим о том, о чем мы говорим, когда говорим «Google Fonts».

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

Краткая история веб-типографии

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

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

Только когда вышел CSS2, веб-браузеры получили возможность загружать шрифты с веб-сайтов , Однако, чтобы это работало, вы должны были владеть (то есть приобрести) шрифт, который вы хотели использовать на своем сайте.

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

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

Введите Google Fonts

Многое изменилось, когда Google Fonts был представлен в 2010 году. Пока не первый сервис в своем роде ( Typekit был там раньше), Google Fonts стал популярным местом для пользовательской веб-типографики.

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

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

Звучит хорошо, правда? Теперь, если вы хотите узнать, как использовать Google Fonts с веб-сайтом WordPress, просто продолжайте читать. Это именно то, что мы получим сейчас.

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

Есть несколько способов добавить Google Fonts на ваш сайт с небольшим количеством кода. Мы рассмотрим каждый из них ниже. Однако все они начинаются одинаково.

1. Найдите правильный шрифт

Самый первый шаг должен пойти к Google Fonts веб-сайт и выберите шрифт. Есть несколько способов сделать это.

Если вы ищете конкретный шрифт, самый простой способ - найти его непосредственно по имени в правом верхнем углу.

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

  • Serif - смысл шрифтов с небольшими волнистыми линиями в конце. Times New Roman - хороший пример шрифта с засечками.
  • Sans-Serif - это простые шрифты без маленьких линий. Посмотрите на тип, который мы используем на этом сайте, чтобы понять, о чем мы говорим.
  • Отображение - поиск шрифтов, которые можно использовать на большом дисплее, например для заголовков и заголовков.
  • Почерк - типография, которая выглядит так, как будто кто-то нарисовал ее от руки.
  • Monospace - шрифты с символами, которые имеют одинаковый интервал. Любой, кто уже использовал компьютеры в конце 80-х, видел это.

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

Если этого недостаточно, вы также можете искать шрифты по стилю. Варианты для этого включают в себя:

  • Количество стилей - сколько вариантов стиля предлагает шрифт.
  • Толщина - от очень тонких букв до очень толстых.
  • Наклонные - буквы прямые или наклонные?
  • Ширина - поиск по расстоянию между буквами и символами.

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

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

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

2. Выберите шрифт

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

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

3. Выберите стили и дополнительные наборы символов

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

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

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

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

4. Вставьте шрифты на свой сайт WordPress.

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

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

а) Добавление пользовательских шрифтов в WordPress с помощью @ font-face

С помощью оператора CSS @ font-face вы можете указать браузерам загружать шрифты, которые находятся на вашем собственном сервере.

Это означает, что для того, чтобы использовать этот метод, вам сначала необходимо загрузить любой выбранный вами шрифт из Google Fonts и загрузить его на свой сервер через FTP.

Загрузка может быть выполнена с помощью значка в правом верхнем углу.

После этого вам необходимо разместить файлы на вашем сервере. Хорошее место будет в каталоге шрифтов в вашей (дочерней) папке темы. Как только вы разместите их там, вы можете назвать шрифты так:

@ font-face {font-family: Lato; формат src: url ('http://yoursite.com/wp-content/themes/yourtheme/fonts/Lato-Regular.ttf') (истинный тип), url (http://yoursite.com/wp- формат содержимого / themes / yourtheme / fonts / Lato-Italic.ttf ') (' truetype '), url (' http://yoursite.com/wp-content/themes/yourtheme/fonts/Lato-Light.ttf ') формат ( 'TrueType'); }

Проблема с этим методом: для достижения наилучших результатов вам, возможно, придется добавить шрифты в нескольких форматах. В то время как большинство современных браузеров могут работать с файлами .ttf (True Type Fonts), не все старые могут это делать.

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

б) Вызов шрифтов через CSS с использованием @import

Второй вариант добавления пользовательских шрифтов в WordPress - загрузить их в таблицу стилей через @import . Этот метод похож на @ font-face , однако вместо загрузки шрифта с вашего собственного сервера вы вызываете его откуда-то еще (в данном случае Google).

Настроить это довольно легко, так как Google предлагает готовое решение. Просто нажмите @import в Google шрифтах, чтобы найти необходимый CSS.

Теперь все, что вам нужно сделать, это скопировать его (без скобок <style> ) и вставить в начало таблицы стилей вашей темы. Сохранить и все готово.

Хотя этот способ добавления пользовательских шрифтов прост, он может ухудшить производительность сайта, поскольку блокирует параллельные загрузки. Это означает, что браузеры должны завершить загрузку шрифта, прежде чем они смогут перейти к остальной части вашего сайта. Особенно, если вы импортируете несколько шрифтов, это может сильно замедлить работу сайта (даже если Google объединит их в один запрос).

в) Встраивание Google-шрифтов через HTML

Один из самых простых способов добавить шрифт на ваш сайт - просто скопировать код, предоставленный Google, и добавить его в файл header.php вашей темы. Все, что вам нужно, это убедиться, что он находится внутри раздела <head> вашего сайта над вызовом вашей основной таблицы стилей, вот так:

<link href = "https://fonts.googleapis.com/css?family= Lato: 300,400,400i" rel = "таблица стилей"> <link rel = "stylesheet" type = "text / css" href = "http: / /yoursite.com/wp-content/themes/yourtheme/style.css "media =" all ">

Сохраните, и вы готовы идти. Чтобы ускорить процесс, вы также можете объединить несколько шрифтов в одну загрузку.

Однако это может стать немного проблематичным, если вы используете фреймворк темы или не дочернюю тему. Если это так, у вас может не быть header.php или вы рискуете перезаписать ваши изменения при обновлении.

Кроме того, с помощью этого метода, если другой компонент вашего сайта запрашивает тот же шрифт или таблицу стилей (маловероятно, но возможно), он будет загружен более одного раза, что снова увеличивает время загрузки вашего сайта.

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

г) ставить в очередь шрифты Google - путь WordPress

Последний и рекомендуемый способ добавления шрифтов Google на ваш сайт - это использование wp_enqueue_style функция.

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

Чтобы это работало, все, что вам нужно, - это ссылка на шрифты на сервере Google, без всего, что с этим связано. В моем случае это https://fonts.googleapis.com/css?family=Lato:300,400,400i.

Теперь все, что нам нужно сделать, - это обернуть вокруг него некоторый код, чтобы он правильно загрузился, а затем добавить его в файл functions.php нашей (дочерней) темы.

function custom_add_google_fonts () {wp_enqueue_style ('custom-google-fonts', 'https://fonts.googleapis.com/css?family=Lato:300,400,400i', false); } add_action ('wp_enqueue_scripts', 'custom_add_google_fonts');

Сохраните, загрузите, и это должно сработать. Просто не забудьте заменить ссылку своей.

5. Назовите Google Fonts в своей таблице стилей

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

Google на самом деле так рад предоставить вам необходимый CSS для этого, включая запасной шрифт!

Google на самом деле так рад предоставить вам необходимый CSS для этого, включая запасной шрифт

Пример того, как вы можете использовать его на своем сайте:

.entry-title {font-family: Lato; Вес шрифта: нормальный; }

Вот и все. Не так сложно, правда? Тем не менее, если вы не очень любите DIY, вы также можете достичь того же с помощью плагина WordPress. Мы покажем вам, как это сделать сейчас.

Добавление Google шрифтов в WordPress с помощью плагина

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

1. Установите плагин

В качестве самого первого шага нам нужно установить плагин на наш сайт. Для этого просто зайдите в Плагины> Добавить новый и найдите его имя. Найдите его в списке и нажмите « Установить сейчас» .

После завершения установки не забудьте активировать!

2. Изменить шрифты

После установки Easy Google Fonts в настройщик WordPress добавляется новое меню под названием « Типография» (его можно найти в разделе « Внешний вид»> «Настройка» ).

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

Чтобы показать вам, как это работает, допустим, я хотел изменить заголовок H2 на шрифт Advent Pro . Для этого сначала нужно щелкнуть меню « Заголовок 2» в « Типографии по умолчанию», чтобы открыть его.

Для этого сначала нужно щелкнуть меню « Заголовок 2» в « Типографии по умолчанию», чтобы открыть его

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

В моем случае я просто нажимаю на Семейство шрифтов, чтобы открыть параметры. Затем я набираю имя Advent Pro и нажимаю на него, когда оно появляется.

Когда я это сделаю, шрифт изменится в моем окне предварительного просмотра.

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

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

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

Кроме того, Позиционирование дает нам возможность изменять поля, отступы, границу, радиус границы и параметры отображения.

Кроме того, Позиционирование дает нам возможность изменять поля, отступы, границу, радиус границы и параметры отображения

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

3. Добавление ваших собственных классов CSS

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

Например, в теме по умолчанию «Двадцать шестнадцать» я не смог изменить заголовок H1 в настройщике. Это связано с тем, что этот заголовок вызывается не только стандартным тегом H1, но и классом CSS с именем .entry-title (как я узнал после просмотра заголовка с помощью инструментов разработчика Firefox). По этой причине плагин не смог изменить свой шрифт.

Если вы попали в похожую ситуацию, вы можете решить ее, создав собственные элементы управления шрифтами в разделе « Настройки»> «Шрифты Google».

Здесь ваша первая задача - ввести имя для вашего элемента управления шрифтом в соответствующем поле. Я иду с названием Entry . После этого нажмите Сохранить управление шрифтом .

На следующем экране вам нужно добавить селектор CSS, которым вы хотите манипулировать. Как упоминалось ранее, в моем случае это .entry-title .

entry-title

У вас есть возможность добавить несколько селекторов, если это необходимо, но для нашего примера достаточно одного.

После этого снова сохраните элемент управления шрифтом и вернитесь к настройщику. Под Типографика вы теперь найдете новый пункт меню под названием Тема типографии . Здесь вы найдете свои собственные элементы управления шрифтами.

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

Круто, верно? И совсем не сложно. Тем не менее, если он все еще не работает для вас, вам, возможно, придется установить флажок Force Styles Override в меню управления шрифтами. Однако в большинстве случаев нормального пути должно быть достаточно.

Это оно! Теперь вы знаете, как добавлять шрифты Google в WordPress как вручную, так и с помощью плагина. Если вы хотите попробовать альтернативу Easy Google Fonts, вы можете посмотреть в WP Google Fonts который имеет аналогичную функциональность. Тем не менее, на данный момент мы сделали.

Добавление пользовательских шрифтов в WordPress - не так сложно, как кажется

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

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

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

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

Как добавить пользовательские шрифты на свой сайт WordPress? Какие-либо дополнительные советы или мысли по поводу вышеизложенного? Дайте нам знать в разделе комментариев ниже.