Google Fonts стал популярным ресурсом для пользовательской веб-типографики с момента его разработки в 2010 году. Google стал лидером по трем основным причинам. Во-первых, не было достаточно приличных служб шрифтов, поэтому Google заполнил пустоту. Во-вторых, даже вначале они предлагали сравнительно большое разнообразие. В настоящее время доступно более 800 шрифтов во многих стилях. В-третьих, эти шрифты доступны бесплатно, что делает их особенно привлекательными.
Кроме того, их на удивление легко интегрировать в ваши дизайнерские проекты. Мы покажем вам, как включить эти шрифты Google в свой сайт WordPress.
Google шрифты
Для начала вам нужно выбрать шрифт, с которым вы хотите работать. Есть множество вариантов, поэтому у вас есть довольно большое меню на выбор. Вы можете найти их, перейдя в Страница шрифтов Google. Если вы ищете конкретный шрифт, просто введите имя шрифта в поле поиска, и должен появиться образец.
Вы также можете использовать другие параметры поиска. Прямо под полем поиска находится кнопка «Категории». Если вы нажмете на это, откроется раскрывающееся меню с пятью вариантами. Это следующие:
- Засечки - это шрифты с короткими линиями, отходящими от верхнего и нижнего штрихов буквы. Times New Roman и Sylfaen - хорошие примеры.
- Sans Serif - как следует из названия, это шрифты без этих маленьких линий. Они, как правило, имеют простой и чистый эстетический вид.
- Дисплей - это то, что можно назвать привлекающими внимание шрифтами. Они лучше всего подходят для заголовков, а не для длинного текста.
- Рукописный ввод - эти шрифты создают впечатление, будто кто-то написал их от руки. Вы обнаружите, что многие из них написаны курсивом или имеют менее последовательный интервал.
- Моноширинный - как и на пишущей машинке, их буквы имеют одинаковую ширину по горизонтали. Они очень равномерно расположены.
Помимо этого, у вас также есть другие опции на выбор, например, выбор языка и свойств шрифта. Последний включает количество стилей, толщину, наклон и ширину.
Встраивание шрифтов в WordPress
Если вы хотите добавить эти уникальные шрифты на свой сайт WordPress, вы можете попробовать несколько способов.
Использование CSS
Нажмите на шрифт, выбранный Google, и вы перейдете на страницу с подробными сведениями о шрифтах. В правом верхнем углу есть знак «+». Щелкните по нему, и откроется боковое окно. Нажмите «Вставить».
Теперь вы можете нажать @Импортировать. Это откроет код CSS, который вам нужно скопировать. Перейдите в таблицу стилей своей темы WordPress и вставьте ее в начало. Убедитесь, что вы скопировали ссылку для импорта без скобки. Убедитесь, что вы сохранили, и вы добавили шрифт.
Использование PHP
Выполните первые несколько шагов и скопируйте ссылку, которую вы получите после нажатия на знак «+». Теперь просто добавьте его в файл header.php вашей темы. Не забудьте сохранить, чтобы добавить шрифт.
Использование функции Javascript
Вы также можете попробовать что-то, известное как «постановка в очередь». Для этого вам понадобится функция wp_enqueue_style. С помощью этого метода вы можете добавить выбранный шрифт в раздел заголовков всех страниц вашего веб-сайта. Это отличный способ внести сразу несколько изменений.
Просто получите ссылку на шрифт (от http до ”) и добавьте ее в файл functions.php своей темы с дополнительным кодом вокруг нее. Вот код, который вам понадобится:
функция custom_add_google_fonts () {
wp_enqueue_style (‘custom-google-fonts’, https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap, ложь);
}
add_action (‘wp_enqueue_scripts’, ‘custom_add_google_fonts’);
Любой из этих вариантов отлично подойдет для интеграции Google Fonts на ваш сайт WordPress, поэтому важно выбрать тот, который вам удобнее всего.