Как сделать ..?

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

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

Варианты шрифтов, которые поддерживает Jannah


  • Theme Defaults — шрифты по умолчанию, которые поставляются вместе с темой.
  • Standard Fonts — Вы можете выбрать один из стандартных шрифтов браузера, которых около 15 +.
  • Google Fonts —  Вы можете выбрать один из 800 google шрифтов.
  • FontFace.me Fonts — Вы можете выбрать один из +150 FontFace шрифтов.
  • Any external fonts (e.g. Typekit) — добавьте свой собственный шрифт, если вы купили его и хотите добавить на свой сайт.

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


Шаг 1 — загрузите файл шрифтов на сервер.

Шаг 2 — перейдите в WP admin → Jannah → Theme Options → Styling → Custom CSS и вставьте туда этот код:

@font-face {
	font-family: "FontName";
	src: url("http://yoursite.com/fonts/fontname.eot");
	src: url("http://yoursite.com/fonts/fontname.eot?#iefix") format("embedded-opentype"),
	url("http://yoursite.com/fonts/fontname.woff") format("woff"),
	url("http://yoursite.com/fonts/fontname.ttf") format("truetype"),
	url("http://yoursite.com/fonts/fontname.svg#fontname") format("svg");
}

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

Шаг 3 — перейдите в  WP admin → Jannah → Theme Options → Typography и следуйте к элементу с названием вашего загруженного ранее шрифта, например «Body Font Family«.

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

Source — выберите Any external fonts (любой внешний шрифт) например: Typekit.

Font Family — введите имя шрифта FontName, который вы добавили в предыдущем коде:

font-family: "FontName";

Общий рейтинг сайта

Общий дизайн - 9.4
Качество контента - 8.7
Картинки - 8.8
Дружелюбность - 9.5

9.1

Итоговая оценка

Поставьте и вы свою оценку ниже 🙂

Как настроить шрифты используемые на сайте WordPress
User Rating: 4.55 ( 1 votes)
Тэги
Показать больше

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Close
Close