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

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

Иногда вам может понадобиться добавить собственные шрифты в WordPress. Они помогут освежить дизайн вашей темы и сделать ее запоминающейся. В сегодняшней статье мы покажем вам как добавить собственные шрифты в WordPress, используя Google Fonts, TypeKit, и CSS3 @Font-Face.

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

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

Раньше шрифты были дорогими, но сейчас все изменилось. Существует много мест, где можно найти бесплатные веб шрифты, а именно: Google Fonts, Typekit, FontSquirrel, и fonts.com.

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

Добавляем шрифты в WordPress из Google Fonts

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

Просто переходим в Google fonts library и выбираем шрифт, который хотим использовать. Далее, кликаем на кнопку quick use под шрифтом.

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

После этого прокрутите немного и увидите раздел с кодом для встраивания. Необходимо скопировать этот код и вставить его в файл header.php своей темы сразу после тега .

Вот вы и добавили Google font на свой сайт WordPress.
Использовать шрифт можно в таблице стилей вашей темы следующим образом:

.h1 site-title

Добавляем шрифты в WordPress с помощью Typekit

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

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

Вам также потребуется установить и активировать плагин Typekit Fonts for WordPress. После активации просто перейдите в Внешний вид » Typekit Fonts и вставьте полученный код на странице настроек плагина.

Вот и все, теперь можно использовать выбранный вами шрифт Typekit в таблице стилей темы WordPress:

h1 .site-title

Добавляем шрифты в WordPress с помощью CSS3 @font-face

Самым «прямым» способом добавления собственных шрифтов в WordPress является их добавление с помощью CSS3 @font-face . Этот способ позволяет вам использовать любой шрифт на ваш выбор на своем сайте.

Первым делом вам необходимо скачать понравившийся шрифт в веб формате. Если же нет веб формата для вашего шрифта, то его можно сконвертировать с помощью FontSquirrel Webfont generator.

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

Лучшим место будет новая папка “fonts” в директории в вашей темой.

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

После того, как вы загрузите шрифт, необходимо подключить его в таблице стилей своей темы с помощью правила CSS3 @font-face, вот так:

@font-face < font-family: Arvo; src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); font-weight: normal; >

Не забудьте изменить font-family и ссылку на свои собственные. После этого вы можете использовать шрифт где угодно в таблице стилей следующим образом:

.h1 site-title

Загрузка шрифтов напрямую с помощью CSS3 @font-face — не всегда самое лучшее решение. Если вы используете шрифт, который есть в Google Fonts или Typekit, то лучше, чтобы он загружатся с их сервера для оптимальной производительности вашего сайта.

Вот и все. Мы надеемся, что эта статья помогла вам добавить собственные шрифты в WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

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

Как добавить шрифт в тему 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 по умолчанию не предоставляет полного контроля над шрифтами. Только некоторые темы оформления включают в себя полноценную поддержку пользовательских шрифтов. В этом руководстве вы узнаете, как их использовать на своем WordPress-сайте.

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

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

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

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

Google Fonts и Adobe Edge Fonts бесплатны. Поэтому предоставляемые ими шрифты не уникальны. Вот еще несколько сервисов для поиска шрифтов:

1. TemplateMonster– здесь представлено много шрифтов для личного использования за небольшую цену. Также они доступны в ONE web development kit.
2. MyFonts– сервис предлагает самый большой выбор шрифтов в мире. Но их стоимость достаточно высокая.
3. FontSpring– сервис продает современные шрифты для коммерческого использования. Но практически в любом семействе есть 1-2 бесплатных шрифта. Кроме этого доступен раздел с бесплатными шрифтами.
4. Cufonfonts– еще одна обширная коллекция разнообразных шрифтов. Здесь представлено много бесплатных шрифтов, разделенных на отдельные категории.
5. Dafont– коллекция сервиса состоит из 3500 бесплатных шрифтов. Большинство из них предназначены только для личного использования. Здесь можно выбрать шрифты в стиле комиксов, видеоигр, винтажные или стилизованные под японские символы.

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

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

1. С помощью плагинов .
2. Вручную .
3. Темы оформления : многие темы оформления WordPress включают в себя встроенные параметры для настройки шрифтов.

Вариант 1 – с помощью плагинов

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

Характеристики плагинов для смены шрифтов

Специализированный плагин должен обеспечивать следующее:

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

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

Custom Font Uploader

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

Use Any Font

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

WP Google Fonts

Плагин позволяет использовать каталог шрифтов Google. Одним из преимуществ этого плагина является добавление около 1000 шрифтов Google.

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

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

Выберите необходимые шрифты и настройте их.

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

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

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

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

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

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

В дочерней теме оформления создайте новую папку «fonts». Она должна располагаться в каталоге wp-content/themes/your-child-theme/fonts

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

Это можно сделать через панель управления хостингом или с помощью FTP. Добавьте необходимые файлы шрифтов в недавно созданную папку «fonts».

Шаг 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 — его местоположение (относительные ссылки). Нам необходимо указать ссылку на каждый стиль отдельно. Первоначально мы устанавливаем для свойств 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; >

Здесь мы дополнительно добавили свойство 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: bold.

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

Мы подключили четыре стиля шрифта.

Заключение

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

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

Сергей Бензенко автор-переводчик статьи « How to Add Custom Fonts to your WordPress Site »

Как добавить свой шрифт в WordPress?

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

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

1. Подключение через CSS;
2. Регистрация шрифта с помощью API.

Забегая вперед, отметим, что добавление шрифтов с помощью плагинов мы считаем избыточным.

1. Добавление шрифта в CSS с помощью @font-face

• Загрузите исходные файлы шрифтов на сервер:
  • Наилучшим расположением кастомных шрифтов будет являться директория вашей темы оформления WordPress (/wp-content/themes/my-theme/fonts/).

  @font-face < font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); >

  @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap&subset=cyrillic');

  2. Подключение шрифта через wp_enqueue_style()

  Ссылка из Google Fonts представляет собой таблицу стилей с правилами @font-face . Поэтому мы с легкостью можем зарегистрировать ее с помощью WordPress API.

  Для этого достаточно разместить код в functions.php вашей темы оформления:

  function google_fonts() < wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap&subset=cyrillic', false ); >add_action( 'wp_enqueue_scripts', 'google_fonts' );