Новости

Как правильно применять в JavaScript асинхронные функции: примеры работы с ES 2017
От автора: возможность писать на JavaScript асинхронные функции является важным обновлением в ES2017. Что такое асинхронные функции? Асинхронные функции — это функции, которые возвращают promise. Мы

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

Как исправить JavaScript error "ВКонтакте"? Что делать при ошибках JavaScript в "ВКонтакте"?
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Правильное использование Tor Browser
Tor Browser полностью анонимен – Миф или реальность? Многие считают, что Tor — это полностью анонимное и безопасное средство для интернет-серфинга, которое не дает никому возможность контролировать то,

Javascript error object is not a function вконтакте как исправить
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Как исправить ошибку javascript error вконтакте
На сегодняшний день «Вконтакте» является наиболее удобным русскоязычным ресурсом, который представляет собой не только крупнейшую социальной сеть, но и сервис для просмотра видео и прослушивания аудиозаписей.

Что такое JavaScript и для чего он используется?
Подробности декабря 10, 2015 Просмотров: 20225 В интернете миллионы веб-страниц,

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

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

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

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

Опубликовано: 01.09.2018

Хотите добавить пользовательский шрифт в ваш WordPress сайт? Или изменить тот шрифт который был изначально? Независимо от того создаете ли вы новую WordPress тему или настраиваете и редактируете существующую, пользовательские шрифты помогут вам освежить вашу тему и выделить ее из всеобщей массы. В этой статье мы покажем вам как изменить/добавить любой шрифт в WordPress сайт с помощью CSS3 — методом @Font-Face.

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

К счастью добавить свой шрифт в WordPress сайт не составит вам особого труда, используя CSS3 и плавило @Font-Face. Все, что вам нужно сделать — это загрузить сам шрифт на сервер и добавить небольшой отрывок CSS кода в файл Style.css вашей темы.

Давайте приступим к делу и добавим свой шрифт в WordPress.

Поиск шрифта

Есть много мест, где можно найти шрифты для свободного использования, например, FontSquirrel  или  Adobe Edge Web Fonts . Просто убедитесь в том, что выбранный вами шрифт имеет лицензию и подходит для ваших нужд.

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

Существует два основных вида шрифтов: с засечками (англ. Serif) и без засечек (Sans-Serif). Шрифты с засечками имеют завершающие штрихи (завитки) по краям, а шрифты без засечек наоборот. На изображении внизу вы можете увидеть разницу между двумя видами шрифтов.

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

Краткий обзор типов шрифтов и их расширений:

TrueType Font (TTF) — совместим с Internet Explorer 9.0 и выше, Chrome 4.0 и выше, FireFox с версии 3.5, Safari с 3.1, и Opera с 10.0. OpenType Font (OTF) — имеет такую же совместимость с браузерами как TryeType Font. Web Open Font Format (WOFF) — Internet Explorer с версии 9.0, Chrome с версии 5.0, FireFox с 3.6, Safari с 5.1, и Opera с 11.1. Web Open Font Format 2.0 (WOFF2) — поддерживается в Chrome с версии 36.0, в Firefox с версии 35.0, и Opera с 26.0. Embedded OpenType Font (EOT) — Исключительно для Internet Explorer в версии 6.0 и выше.

Тип Web Open Font Format (WOFF) стал стандартом, поскольку шрифты сжимаются и имеют меньшую пропускною способность и содержат дополнительные метаданные, но к сожалению не всегда доступен для загрузки.

Если у вас возникнут проблемы с поиском типа шрифта WOFF, то в таком случае необходимо найти тип TrueType Font или OpenType Font и преобразовать его в нужные вам типы с помощью отличного сервиса  FontSquirrel WebFont Generator.

Для этого просто перейдите в FontSquirrel WebFont Generator  и загрузите шрифт с расширением TTF или OTF, кликнув по кнопке Upload Fonts . После этого сделайте по следующему порядку:

Выберите опцию Expert . Отметьте типы: TrueType, WOFF, WOFF2, EOT Compressed, SVG . Затем выберите опцию Custom Subsettings Отметьте галочкой Cyrillic и English В самом низу отметьте пункт  Yes, the fonts I’m uploading are legally eligible for web embedding Скачайте файлы, кликнув по кнопке Download Your Kit .

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

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

Загрузка шрифта

После того как вы нашли или сгенерировали подходящий вам шрифт, необходимо загрузить файлы шрифта на сервер, в: wp-content/themes/ваша тема Лучше всего создать новую папку «Fonts» в папке вашей темы, и загрузить файлы в эту папку, и тогда путь к папке будет выглядеть так:  wp-content/themes/ваша тема/fonts.

Загрузить файлы (5 файлов с расширениями .eot, .svg .ttf, .woff и .woff2, ) шрифта можете по FTP или через файловый менеджер в панели управления вашего хостинга.

После того, как вы загрузили файлы шрифта на сервер, необходимо прописать их в файле таблицы стилей style.css, который находится в: wp-content/themes/ваша тема.

Для этого просто откройте файл stylesheet.css, которая находиться в распакованных файлах шрифта.

Скопируйте содержимое

И вставьте этот отрывок кода в Style.css вшей темы.

После этого вы можете использовать новый шрифт в любом месте таблицы стилей вашей темы, например:

[code style=»1″].h1, h2, h3, h4, h5, h6 {

font-family: «Lato», arial, sans-serif;

}[/code]

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

Вывод

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

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

rss