Как добавить пользовательские шрифты на сайт WordPress

Хотите узнать, как добавить пользовательские шрифты на веб-сайт WordPress?

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

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

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

Давайте выясним.

Почему я должен использовать пользовательские шрифты?

Прошли те времена, когда шрифты Times New Roman и Georgia считались единственными шрифтами для текста на веб-сайтах. За последние несколько лет шрифтовое пространство полностью изменилось с появлением таких шрифтов, как Google шрифты и другие.

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

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

Важность использования пользовательских шрифтов

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

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

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

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

Альтернативы Google Fonts

Многие из вас знают, Google шрифты. Есть еще много сайтов, где можно найти красивые шрифты. Некоторые из них бесплатны для личного использования. Если вам нужно коммерческое использование, вам понадобится лицензия. Шрифты Google и Adobe Edge Fonts бесплатны. Именно поэтому они не столь уникальны.

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

1. TemplateMonster — На сайте TemplateMonster вы найдете все необходимое для веб-дизайна. Есть также множество шрифтов и пакетов шрифтов для личного использования по небольшой цене. Кроме того, для облегчения выбора все шрифты представлены на брошюрах или в рамках. Каждый шрифт также представлен с коммерческой лицензией.
2. MyFonts — MyFonts на данный момент предлагает самый большой выбор шрифтов в мире. Впрочем, и цены здесь тоже в верхнем сегменте. Так что, если у вас ограниченный бюджет, это может быть не для вас.
3. ШрифтВесна — Fontspring продает новые шрифты для коммерческого использования. Но почти в каждой семье можно использовать 1-2 бесплатных шрифта в личных целях. Также есть отдельный раздел с бесплатными шрифтами. Коллекция яркая. Но вам нужно будет внимательно изучить лицензионную информацию для конкретного шрифта перед загрузкой.
4. Кюфоны — Это еще и огромная коллекция разных шрифтов. Выберите любой, и вы увидите страницу с подробной информацией о нем. Бесплатных шрифтов предостаточно, и они разделены на отдельные разделы. Система сортировки на CufonFonts достаточно гибкая и удобная. Кроме того, включена поддержка веб-шрифтов.
5. DaFont — Еще одна доступная коллекция из 3 бесплатных шрифтов. Большинство из них предназначены только для личного использования. Классная функция DaFont — система категорий. Вы можете выбрать шрифты в стиле комиксов, видеоигр, винтаж и т. д.

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

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

Как добавить пользовательские шрифты в WordPress

Есть несколько способов добавить шрифты на сайт WordPress:

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

Вариант 1 — изменить шрифты WordPress с помощью плагинов

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

Особенности плагинов пользовательских шрифтов

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

Вот несколько моментов, которые следует учитывать:

• Возможность использования пользовательского шрифта
• Возможность использования нескольких шрифтов
• Заголовки и целевые компоненты
• Бонус: возможность менять настройки шрифта из визуального редактора

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

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

1. Лучший потрясающий шрифт

Этот плагин WordPress позволит его пользователям автоматически комбинировать последнюю версию шрифтов Better Font Awesome с CSS, шорткоды и многое другое. Кроме того, этот плагин WordPress обновляется автоматически.

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

скачать | Демонстрация | веб-хостинг

2. Google Fonts для WordPress

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

Кроме того, вы сможете сохранить его и отредактировать на веб-интерфейсе, когда найдете комбинацию, которая вам понравится.

Его функции включают в себя: предварительный просмотр в реальном времени, довольно продвинутый SEO, многоязычная поддержка, поддержка большего количества шрифтов 870 + Google, простые обновления и многое другое.

скачать | Демонстрация | веб-хостинг

3. Плагин шрифтов

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

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

4. Простые Google Шрифты

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

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

скачать | Демонстрация | веб-хостинг

Вариант 2 — вручную установить пользовательские шрифты WordPress

С помощью директивы @font-face вы можете подключить один или несколько шрифтов к вашему сайту. Но у этого метода есть свои плюсы и минусы.

льготы:

• Благодаря CSS можно подключить шрифты любого формата: ttf, otf, woff, svg.
• Файлы шрифтов будут находиться на вашем сервере — вы не будете зависеть от сторонних сервисов.

недостатки :

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

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

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

Шаг 1: Создайте папку «шрифты»

В вашей дочерней теме создайте новую папку «шрифты» в: wp-content/themes/ваша-дочерняя-тема/шрифты

Шаг 2. Загрузите загруженные файлы шрифтов на свой веб-сайт.

Это можно сделать через панель управления хостингом или через FTP.

Добавьте все файлы шрифтов в только что добавленную папку шрифтов: wp-content/themes/ В вашей дочерней теме создайте новую папку «шрифты» в: wp-content/themes/ваша-дочерняя-тема/шрифты что вы создали.

Шаг 3. Импорт шрифтов через таблицу стилей дочерней темы

Открыть файл style.css вашей дочерней темы и добавьте следующий код в начало файла CSS (после комментария дочерней темы):

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

где МойВебШрифт — название шрифта, а значение свойства src (данные в скобках в кавычках) — их расположение (относительные ссылки). Нам нужно указать каждый стиль отдельно.

Так как сначала мы подключаем обычный стиль, мы устанавливаем свойства font-weight и font-style в normal.

Шаг 4. При добавлении курсив, напишите следующее:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

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

Шаг 5. Чтобы добавить полужирный шрифт, добавьте следующий код:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

Где мы устанавливаем свойство font-weight жирным шрифтом.

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

Шаг 6. Чтобы подключить полужирный курсив, введите следующее:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

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

Но есть одно замечание: это подключение шрифта не будет правильно отображаться в Internet Explorer 8. Утешением является то, что очень немногие люди все еще используют IE8.

Другие рекомендуемые ресурсы

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

• 10 аккордеонных плагинов WordPress для веб-сайта
• Как добавить несколько столбцов в WordPress
• Некоторые плагины для интеграции услуг Google на своем блоге
• 5 WordPress плагины для отображения уведомлений
• Использование различных фонов WordPress

Заключение

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

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

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

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

В то же время, поделитесь этой статьей в разных социальных сетях.   

...