How to add a new font in WordPress? (in Russian) | Как добавить шрифт на сайт WordPress?


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

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

Инструкция по установке нового шрифта на сайте WordPress.
1. Выбрать шрифт с поддержкой кириллицы. Например, вот здесь.
2. Скачать его в формате otf/ttf.
3. Для избежания проблем распознавания шрифта разными браузерами, следует загрузить скачанный шрифт на любой удобный ресурс (можно этот) и после обработки скачать с него файлы шрифтов в форматах ttf, woff, woff2, oet, svg.
4. Распаковать архив и скопировать данные форматы в папку fonts темы сайта.
5. Создать css файл для нового шрифта (см. скачанный архив) и сохранить его в папку темы сайта со стилями.
6. Подключить новый файл к теме сайта. В теме своего сайта я нашла, где подключается css файл для "старого" шрифта и по аналогии проделала это для нового (файл functions.php, функция connect_theme_stylesheets()).

Проблемы, которые могут возникнуть, и пути их решения.
1. Не подключается шрифт (на сайте не видно изменений).
а) если сайт кешируется, то очистите кеш браузера, чтобы удалить старые файлы css;
б) неверно подключены файлы css/шрифтов папки fonts (например, ошибки в пути к файлу).
2. Шрифт работает только для цифр и латиницы.
а) если был использован ресурс fontssquirell, выберите языковые настройки (см. картинку);



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

Если возникнут сложности, то пишите в комментариях: чем смогу, помогу.

Комментарии

Популярные сообщения из этого блога

A UML use case with PowerDesigner (in Russian) | Как создать UML use case в PowerDesigner

A UML use case with PowerDesigner