Как изменить шрифт на вордпресс

Как добавить шрифт в тему WordPress?

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

Где скачать шрифты для ВордПресс?

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

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

Google Fonts как один из способов подключения шрифтов в WordPress

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

1. Заходим в Google fonts Library и определяемся с подходящим шрифтом.
2. Нажимаем на «quick use» под ним.
3. Откроется новая страница с предложением выбора стилей. Советуем обращать внимание лишь не те стили, которые вы действительно будете использовать.
4. Переходим в раздел с кодом для встраивания.
5. Копируем код и вставляем его в header.php текущей темы после тега. Готово, Google Font добавлен на сайт WP.

Добавляем шрифт вручную

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

• Скачиваем шрифт на компьютер, извлекаем его из архива.
• Загружаем файл шрифта (рекомендуем пользоваться FTP-клиентом либо файловым менеджером) в каталог wp-content/themes/ваша-тема/fonts (в случае отсутствия папки fonts создаем ее). В качестве примера возьмем Lobster-Regular.ttf.
• В панели админа WP переходим во «Внешний вид», затем нажимаем «Редактор».
• Выбираем style.css, меняем названия font-family и url на свои и добавляем код.
• Нажимаем «Обновить файл», чтобы изменения сохранились.

После выполнения вышеописанных действий интерфейс не изменится. Для назначения шрифта конкретному элементу вам понадобится выполнить редактирование style.css. К примеру, с помощью следующего кода шрифт Lobster будет задействован для названия сайта: .site-title .

Использование плагинов для добавления шрифтов

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

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

Как подключить шрифт к сайту WordPress через плагин Typekit? Все просто: регистрируемся на сайте и создаем собственный набор. Далее выполняем установку плагина Typekit Fonts For WordPress. В разделе «Настройки» — «Typekit fonts» вставляем код, который получили на сайте. Все добавленные в набор шрифты будут автоматически загружены.

Use Any Fonts – очередной популярный плагин для добавления шрифтов на сайт ВордПресс. Он находится на официальном хранилище WP. После установки плагина переходим в «Use any font», создаем ключ API и верифицируем операцию. Когда проверка завершится, появится возможность загрузки шрифтов разных форматов.

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

Понравилась статья? Расскажите о ней друзьям:

Как менять размер шрифтов в WordPress? Основные способы

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

Следуйте инструкции, чтобы сделать все просто и быстро.

Способ 1. Меняем размер шрифта с помощью плагина Advanced Editor Tools

Advanced Editor Tools — полностью бесплатный компонент, который позволяет вернуть в редакторе классическую панель инструментов.

Найти плагин можно в официальном репозитории WordPress. После стандартной установки и активации перейдите в настройки плагина.

Плагин предложит вам переключиться между редактором блоков Gutenberg и классическим редактором TinyMCE. Выберите второй вариант и сохраните изменения.

Убедитесь, что вы поставили отметку в чек-боксе

Дальнейшие действия. Если вы выбрали классический редактор как единственный вариант.

Перейдите в раздел Записи — Добавить новую или перейдите к редактированию одной из существующих записей. Если вы выбрали только классический вариант, то увидите примерно следующее.

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

Результат будет выглядеть вот так.

Способ 2. Изменение размеров с помощью CSS

Первый способ более простой. Но он не подойдет, если вы используете Elementor или другой аналогичный конструктор страниц. Изменить размер шрифта с помощью CSS немного более сложное, но универсальное решение, которое считается классическим.

Этот вариант сложнее, но только если вы никогда не работали с CSS. Инструкция от Host4Biz поможет сделать всё быстро и правильно.

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

Разберем, как это делается:

В консоли выбираем пункт меню Внешний вид — Настроить.

Затем в открывшемся меню выбираем Дополнительные стили.

Следующим шагом добавляем нужный код в поле справа.

Теперь разберемся, какой именно код добавлять.

1. Чтобы поменять весь шрифт, вставляйте:

Значение 1,25 можно заменить другой цифрой.

2. Чтобы изменить шрифт в абзацах.

3. Для изменения шрифта в части заголовков

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

4. Изменить размер шрифта в боковом меню

.sidebar li < font-size: 12px; >

5. Чтобы увеличить или уменьшить размер текста в футере

6. Изменение размеров шрифта для определенных размеров экрана

html < font-size: 18px; >@media (min-width: 900px) < html < font-size: 20px; >>

В CSS-стилях можно использовать несколько единиц измерения:

1. Эм (em) — 1em соответствует размеру шрифта на странице, то есть если размер шрифта 12pt, 1em=12pt.
2. Пиксели — пиксель это одна точка на экране компьютера или мобильного устройства.
3. Пункты — эту единицу заимствовали из бумажных изданий. Один пункт соответствует 1/72 дюйма.
4. Проценты — эта величина по умолчанию равна 100%, при увеличении или уменьшении будет меняться.

Способ 3. Изменение размеров шрифта с помощью редактора Gutenberg

Gutenberg — стал стандартным редактором WordPress. Он предлагает возможности для изменения шрифта еще начиная с версии 5.3, где Gutenberg был одним из плагинов.

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

Как видите, все очень просто и быстро.

Итоги

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

Увеличить или уменьшить шрифт можно с помощью плагинов, редактора Gutenberg или редактирования CSS-файлов.

Развивайте свой бизнес онлайн вместе с Host4Biz и читайте наш блог.

База знаний

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

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

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

Итак перейдем к способам изменения шрифта на сайте WordPress.

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

В настройках темы WordPress

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

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

В административной части, сайта на WordPress, идем в настройки темы по пути — Внешний вид — Настроить и оказываемся на странице настроек нашей темы. Скорее всего вы увидите раздел Типографика, Типография, Typography, Шрифты или что либо подобное, в зависимости от вашей темы WordPress. Переходим в этот раздел и настраиваем шрифт заголовка H1 или H2, именно он применяется в WordPress для заголовков статей.

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

Google fonts это библиотека свободных шрифтов для сайтов. Шрифт Google нужного семейства и начертания подгружается браузером с серверов Google вместе с вашим сайтом. Библиотека Google предлагает, на момент написания статьи, более 959 различных шрифтов. Отметим сразу, что большинство шрифтов не поддерживает кириллицу и использовать их на русскоязычном сайте смысла нет. На момент написания статьи, кириллических шрифтов в библиотеке нашлось 106.

Открыв длинный список Google шрифтов в настройках темы, мы столкнемся с ситуацией подбора шрифтов методом тыка. Большинство изменений не приведет к результату, так как только каждый десятый шрифт поддерживает кириллицу. Простой выход заключается подборе нужного нам шрифта на сайте Goole Fonts, переключив настройку Language на Cyrillic. Выбрав понравившийся нам шрифт, мы легко найдем его в длинном списке в настройках темы WordPress. На картинке выше приведен пример изменения шрифта заголовка статьи WordPress, с использованием темы GeneratePress, на компактный Open Sans Condensed. В некоторых темах есть возможность прямо в настройках выбора шрифта указать, что нам необходимы только кириллические шрифты, но это есть далеко не во всех темах.

Мы разобрали как изменить шрифт заголовка статьи WordPress используя возможности настройки темы.

Подключение Google шрифтов к сайту WordPress методом непосредственного редактирования файлов темы

Этот способ подойдет тем кто использует любые темы WordPress, так как мы будем вносить изменения непосредственно в код файлов темы.

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

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

Затем открываем всплывающее наверх окно в правом нижнем углу — Family Selected. Переходим во вкладку CUSTOMIZE и отмечаем, что нам нужны кириллические шрифты.

Во вкладке EMBED выбираем @IMPORTи копируем код, в нашем случае это:

@import url('https://fonts.googleapis.com/css?family=Poiret+One&display=swap&subset=cyrillic');

Теги и

копировать не нужно.

Мы отказываемся от варианта редактирования html-заголовка нашего сайта по причине того, что прямое редактирование кода темы не совсем корректно. Мы используем мощную систему CMS WordPress и при очередном обновлении нашей темы можем потерять сделанные нами вручную изменения.

Корректный способ добавления этого кода к нам в тему через её настройки в Административной панели WordPress вашего сайта. Внешний вид — Настроить — Дополнительные стили.

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

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

В нашем случае это:

font-family: 'Poiret One', cursive;

Теперь найдем какому конкретно элементу нашего сайта присвоить это правило. Сделать это можно с помощью инструментов для вебмастеров браузеров Chrome или Firefox. Перейдем на страницу с любой записью на вашем сайте и выделим текст заголовка. В меню правой кнопки мыши выберем — Посмотреть код или Исследовать элемент, в зависимости от используемого вами браузера.

Из приведенного примера видно, что заголовку статьи в используемой нами теме GeneratePress был присвоен класс .entry-title. В разных темах заголовку статьи может быть присвоен разный класс. Тут нужно повнимательней изучить код сайта в браузере и найти нужный нам класс. Попробуем использовать использовать класс .entry-title, полученный нами при изучении кода темы GeneratePress, в настройках Дополнительных стилей. Необходимо добавить следующий код:

.entry-title

При изучении кода стандартной темы WordPress Twenty Nineteen, можно увидеть что для заголовков статей используется класс .entry .entry-title:

Вставляемый в этом случае код:

.entry .entry-title

Добавить CSS стиль в тему сайта на WordPress можно несколькими способами, включая описанный нами :

• Добавить код в файл стилей на прямую из файлового менеджера на хостинге или отредактировать его локально скачав по FTP;
• Добавить код в файл стилей из административной панели WordPress в Редакторе стилей темы;
• Добавить код стиля в настройках Дополнительных стилей используемой темы WordPress.

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

Внедрение стороннего шрифта на сайт.

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

Более того есть случаи когда это единственный выход внедрения шрифта на сайт. Допустим нужен конкретный шрифт, а он на сервисе Google Fonts не имеет кириллического начертания. Например шрифт Raleway на Google Fonts не поддерживает кириллицу. Этот же шрифт можно найти в интернете с поддержкой русских букв. Например на сайте WebFonts.pro. На этом же сайте можно найти множество других шрифтов, очень красивых и оригинальных.

Рассмотрим процесс внедрения шрифта в стандартную тему Twenty Nineteen сайта WordPress, на примере шрифта Raleway скаченного с сайта WebFonts.pro

Скачиваем архив с файлами шрифта по ссылке данной выше.

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

На мой взгляд, очень элегантно для заголовка смотрится начертание Raleway Thin:

Сохраним css правило из примера на демо странице для его внедрения на сайт:

.your-style

Как мы уже выяснили ранее в этой статье в теме Twenty Nineteen для заголовков статей используется класс .entry .entry-title .

Отредактируем полученный нами код и получим:

.entry .entry-title

Далее нужно в любом файловом менеджере используемом вами для доступа к файлам сайта открыть директорию /wp-content/themes/twentynineteen/fonts/ и закачать туда все файлы со шрифтами полученными нам в архиве. Файлы demo.html и stylesheet.css закачивать на сайт не нужно. Они очень наглядно показывают пример внедрения скаченного шрифта на сайт.

У себя локально на компьютере открываем файл с примерами стилей stylesheet.css

Находим фрагмент кода, понравившегося нам начертания:

@font-face

Необходимо отредактировать в этом коде путь до файла со шрифтом на нашем сайте. В нашем случае это: /wp-content/themes/twentynineteen/fonts/ .

Получим следующий код:

@font-face < font-family: 'Raleway'; src: url('/wp-content/themes/twentynineteen/fonts/Raleway-Thin.eot'); src: local('/wp-content/themes/twentynineteen/fonts/Raleway Thin'), local('Raleway-Thin'), url('/wp-content/themes/twentynineteen/fonts/Raleway-Thin.eot?#iefix') format('embedded-opentype'), url('/wp-content/themes/twentynineteen/fonts/Raleway-Thin.woff') format('woff'), url('/wp-content/themes/twentynineteen/fonts/Raleway-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; >

Далее будем использовать уже описанный нами в этой статье способ внедрения css стиля на сайт через настройки Дополнительных стилей темы. Внешний вид — Настроить — Дополнительный стили.

Приведу еще раз весь код который необходимо добавить:

@font-face < font-family: 'Raleway'; src: url('/wp-content/themes/twentynineteen/fonts/Raleway-Thin.eot'); src: local('/wp-content/themes/twentynineteen/fonts/Raleway Thin'), local('Raleway-Thin'), url('/wp-content/themes/twentynineteen/fonts/Raleway-Thin.eot?#iefix') format('embedded-opentype'), url('/wp-content/themes/twentynineteen/fonts/Raleway-Thin.woff') format('woff'), url('/wp-content/themes/twentynineteen/fonts/Raleway-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; >.entry .entry-title

Вы этой статье мы подробно разобрали как внедрить шрифт на сайт под управлением CMS WordPress несколькими способами.

• WordPress
• 115 Пользователи нашли это полезным

Связанные статьи

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

Не для кого не секрет что заголовок страницы важный компонент SEO и он необходим на страницах со.

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

В этой инструкции рассмотрим вариант смены пароля от администратора WordPress в случае его.

Как Установить Шрифт на Сайт в WordPress

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

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

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

Где скачать шрифты WordPress

Существует множество различных сайтов на которых можно найти бесплатные веб-шрифты. Font Squirrel — это один из таких сайтов. Здесь вы можете найти бесплатные шрифты, лицензированные для коммерческого использования. Google Web Font Service еще один сервис, уже от компании Google, предоставляющий бесплатные шрифты на более чем 135 языках. Edge Web Fonts также является сервисом бесплатных шрифтов предоставляемых Adobe, который может похвастаться огромной коллекцией веб-шрифтов. Возможно вам понравится использовать для этого Typekit, который имеет бесплатную библиотеку из тысяч веб-шрифтов или Fonts.com, что предоставляет более 150,000 шрифтов для веб и рабочего стола.

Еще пара сайтов откуда вы можете скачать бесплатные шрифты dafont и 1001freefonts.

Конвертация шрифтов в дружелюбный для веба формат

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

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

OTF — это самые часто используемые шрифты для веб и являются зарегистрированной товарной маркой Microsoft. Они отлично работают практически со всеми крупными браузерами.

Также называемые как TTF, эти шрифты разработаны Microsoft и Apple в 1980 году и широко используются в обеих операционных системах Windows и Mac. Они поддерживаются всеми крупными браузерами, включая Internet Explorer от версии 9.0, Google Chrome от версии 4.0, Safari от версии 3.1, Firefox от версии 3.5 и Opera от версии 10.0.

WOFF шрифты широко используются на веб-страницах и рекомендованы W3C. Они поддерживаются большинством крупных браузеров, включая Internet Explorer от версии 9.0, Google Chrome от версии 4.0, Safari от версии 3.1, Firefox от версии 3.5 и Opera от версии 10.

WOFF 2.0 шрифты имеют некоторое преимущество перед WOFF 1.0 из-за лучших возможностей сжатия. Они не поддерживаются Safari и Internet Explorer, но отлично работают с Google Chrome версии 36.0 и выше, Firefox версии 35.0 и выше и Opera от версии 26.0.

Эти шрифты являются компактными шрифтами OTF и используются на странице в качестве встроенных шрифтов. Они поддерживаются всеми крупными браузерами.

Если вы нашли шрифт, который вы хотели бы использовать на вашем сайте WordPress, но не уверены совместим ли он с браузерами, используйте Web Font Generator tool. Этот инструмент позволит вам конвертировать практически любой шрифт в дружелюбный для веба формат.

1. Войдите в Web Font Generator tool.
2. Нажмите кнопку Upload(Загрузить) (1) для загрузки вашего шрифта, подтвердите, что шрифты могут быть легально использованы для встраивания на веб-страницу (2).
3. Нажмите кнопку Download(Скачать) (3) и сохраните .zip архив у вас на компьютере.

1. Внутри архива вы найдете шрифты в формате WOFF и WOFF 2.0 вместе с CSS файлом и демо HTML страницей. Эти шрифты поддерживаются практически всеми браузерами.

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

Что вам понадобится

Перед тем, как вы начнете это руководство, вам понадобится следующее:

• Доступ к панели управления WordPress
• Доступ к панели управления хостингом или FTP (необязательно)

Вариант 1 — Установка шрифтов через плагины

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

WP Google Fonts

С помощью WP Google font вы можете легко установить шрифт на WordPress. Этот плагин автоматически внедряет код на ваш сайт. Также он дает вам возможность применить пользовательские шрифты к определенным элементам CSS из панели управления WordPress.

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

Typekit Fonts For WordPress

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

После создания своего набора, установите плагин Typekit Fonts For WordPress. Для настройки данного плагина, перейдите в раздел Настройки → Typekit fonts и вставьте ваш код для встраивания, полученный на сайте. Плагин автоматически загрузит шрифты добавленные в ваш набор.

Use Any Font

Use Any Font — это еще один плагин, который позволит вам установить шрифт на сайт.

Вы можете установить плагин с официального хранилища WordPress. После того как установка будет завершена, перейдите в раздел Use any font, создайте ключ API и нажмите кнопку Verify.

После проверки вы сможете загружать шрифты в форматах ttf, otf и woff. Плагин также позволяет вам применять шрифты к определенным элементам.

Вариант 2 — Как установить шрифт на сайт в WordPress вручную

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

1. Скачайте шрифт на ваш компьютер.
2. Обычно шрифты идут в .zip архиве. Извлеките его.
3. Теперь вам нужно загрузить файл шрифта (используйте FTP-клиент или Файловый Менеджер) в каталог wp-content/themes/ваша-тема/fonts (создайте папку fonts, если таковой не создано). В нашем примере, мы загрузили шрифт Lobster-Regular.ttf.

1. Теперь пройдите в панель управления WordPress и откройте Внешний вид → Редактор. Выберите файл style.css, прокрутите в конец файла и добавьте следующий код (не забудьте изменить значения font-family и url на ваши):

@font-face < font-family: Lobster-Regular; src: url(http://hostinger-tutorials.com/wp-content/themes/twentyfifteen/fonts/Lobster-Regular.ttf); font-weight: normal; >

1. Нажмите Обновить файл для сохранения изменений.

Теперь, код font-face будет загружаться при каждом посещении вашего сайта. Однако пока шрифт еще не используется для каких-либо элементов. Пока вы не увидите никаких изменений в интерфейсе. Чтобы назначить шрифт для определенного элемента, вам необходимо отредактировать тот же файл style.css. Например, следующий код применит шрифт Lobster к нашему названию сайта:

.site-title

На картинке ниже вы можете увидеть результат.

Заключение

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