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

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

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

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

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

Зачем мне использовать пользовательские шрифты?

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

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

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

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

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

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

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

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

Параметры шрифта Google

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

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

TemplateMonster – на сайте TemplateMonster Marketplace есть все необходимое для веб-дизайна. Есть также много шрифтов и пакетов шрифтов для личного использования по низким ценам. Они также появятся в одном пакете веб-разработки. Коллекция огромна и креативна. Чтобы поддержать выбор, все шрифты появляются в брошюрах или фреймах. Каждый шрифт также представлен коммерческой лицензией.
MyFonts: MyFonts в настоящее время предлагает самый большой выбор шрифтов в мире. Цены здесь тоже в самом высоком сегменте. Так что, если у вас ограниченный бюджет, это может быть не вы.
FontSpring: FontSpring продает элегантные шрифты для коммерческого использования. Бесплатные шрифты встречаются практически в каждой семье. 1-2 используется в личных целях. Также есть отдельная зона с бесплатными шрифтами. Коллекция вибрирует. Однако вам следует внимательно изучить информацию о лицензии для определенного шрифта перед его загрузкой.
Cufonfonts – это также полная коллекция разных шрифтов. Выберите один, и вы увидите страницу с подробной информацией о нем. Есть много бесплатных шрифтов, которые разделены на разделы. Система классификации в CufonFonts очень гибкая и практичная. Поддержка веб-шрифтов также включена.
Dafont – еще одна коллекция из 3500 бесплатных шрифтов. Большинство из них предназначены только для личного использования. Хорошей особенностью DaFont является система категорий. Вы можете выбрать шрифты в стиле комиксов, видеоигр, старых шрифтов или стилизованных шрифтов, таких как японские символы.

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

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

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

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

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

Вариант 1: заменить шрифты WordPress плагинами

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

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

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

Вот несколько вещей для рассмотрения:

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

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

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

Пользовательский загрузчик шрифтов

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

Используйте любой шрифт

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

WP Google Fonts

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

Как мне установить шрифты с помощью плагина?

Взять к примеру. WP Google Fonts. Просто установите этот плагин из официального файла WordPress и откройте область Google Fonts.

Здесь вы можете увидеть панель Google Fonts. Выберите шрифты и измените различные настройки, такие как шрифт, используемые элементы и т. Д.

Вариант 2. Ручная установка пользовательских шрифтов WordPress.

Вы можете связать один или несколько шрифтов со своим сайтом, используя директиву @ font-face. Однако этот метод имеет свои преимущества и недостатки.

Льготы:: ::

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

недостатки:: ::

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

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

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

Шаг 1. Создайте папку «Fonts»

Создайте новую папку «Шрифт» в теме вашего ребенка по адресу: wp content / theme / your-child theme / шрифты

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

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

Добавьте все файлы шрифтов во вновь добавленную папку шрифтов: wp content / theme / your-child theme / шрифты создали

шаг 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;
 }

куда MyWebFont – имя источника, а значение свойства src (данные в скобках в кавычках) – его местоположение (относительные ссылки). Нам нужно указать каждый стиль отдельно.

Поскольку мы впервые подключаемся к обычному стилю, мы установили свойства Weight и Font на 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;
 }

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

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

Шаг 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.

Полные пользовательские шрифты WordPress

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

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

Вот и все, не стесняйтесь комментировать.

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