Как изменить/добавить любой шрифт в 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 и Вконтакте .