Замена шрифтов в премиум шаблоне (детальная инструкция на реальном примере)
Недавно у меня был заказ по настройке премиум шаблона для WP. Казалось бы, что сложного может возникнуть в этой ситуации – ты покупаешь платную тему, где имеется великое множество разных опций и предусмотрены все нюансы, но нет. Не зря же в бирже фриланса Freelancehunt десятки заданий по данному направлению. Пример из этой статьи достаточно типичный, плюс он хорошо показывает разницу между подключением шрифтов в WordPress вручную и через премиальные решения. Пост больше для новичков, но все же.
Итак, для себя клиент выбрал макет Seocrawler с популярного архива Themeforest хотя я больше привык работать с отечественным сервисом TemplateMonster. Внимание! Ниже описываю свой алгоритм действий для конкретной ситуации, дабы поделиться опытом решения внезапных проблем и дополнительных задач. В вашем случае все может быть немного по-другому.
Базовая настройка темы и устранение ошибок
Первым делом, что нужно сделать после установки темы, просмотреть все ее функции, методику настройки, полистать документацию. В моем случае (и как это часто бывает) у шаблона есть отдельный раздел со всеми параметрами и опциями для его кастомизации. Там я нашел пункт меню Типография:
Как видите, разработчики макета предусмотрели возможность добавлять в проект свои шрифты с помощью инструмента-загрузчика Font Uploader. Поскольку в ходе работы я подключал демо-контент, то здесь уже был указан шрифт Jost.
К сожалению, на самих вебстраницах он никак не хотел отображаться. И тут я вспомнил один прикол, когда большие буквы в названиях файлов на сервере просто “не воспринимались” на сайте. То есть указанные в настройках пути …/Jost-200-Thin.ttf и …/jost-200-thin.ttf – совсем не одно и то же. Я поменял все имена на FTP и в админке на маленькие буквы, и это сработало!
Кстати, еще один момент про изучение темы. Сам по себе инструмент Font Uploader не влияет на типографику вебсайта, а просто подгружает фонты для использования. Остальные действия выполняются в разделе “Внешний вид” – “Настроить” (Appearance — Customize). В нем надо найти пункт с соответствующими параметрами. В моем случае это “Typography” – “Font Family”:
Здесь вы просто выбираете нужные шрифты для разных элементов веб-проекта.
Процесс замены шрифтов в шаблоне
Во многих платных шаблонах изначально предусмотрена поддержка Google Fonts, и вам не надо заниматься подключением шрифтов в WordPress самостоятельно (что достаточно удобно). Но в данном случае заказчика интересовала реализация такого же оформления как в магазине Amazon. Поэтому переходим туда и с помощью инструментов разработчика Chrome Devtools смотрим, что за фонт у них используется.
Немного погуглив, нашел страницу для разработчиков от Амазона, на которой предлагается скачать набор типографики вместе с нужным мне Amazon Ember Font.
В архиве у нас только файлы с расширением .ttf, поэтому нам пригодится конвертор в .eot чтобы сделать, как в демо-контенте. Нагуглить сервисы «convert ttf font to eot» легче простого. С помощью одного из них выполняем преобразование:
Далее возвращаемся в админку сайта в раздел настроек темы и открываем знакомый нам Font Uploader. Там кликаем по кнопке «Upload Fonts» и появившейся форме загружаем соответствующие файлы шрифтов (кнопка Upload):
Теоретически, можно было добавить еще и Woff-формат (с помощью того же онлайн конвертора), но я этого не делал. Внимание! Проверяйте чтобы все пути и сами файлы имели имена без заглавных букв – иногда из-за этого могут быть ошибки.
Теперь наконец-то переходим в Кастомайзер темы (“Внешний вид” – “Настроить”) и в знакомом нам уже разделе «Typography» – «Font Family» из выпадающего списка выбираем Amazon Ember Font.
Сохраняем и еще раз проверяем чтобы все корректно работало на сайте.
Итого. Как видите, простое желание клиента поменять шрифты в премиум шаблоне включает в себя не просто изменение какой-то одной настройки темы, а может содержать целый комплекс задач. Вы начинаете с изучения принципов работы/настройки макета, находите нужные шрифты, подключаете их в проект, а затем проверяете, чтобы не было никаких ошибок.
Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!
Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:
- Вкладки в Woocommerce товарах — как убрать, добавить, изменить (сниппеты + плагин)
- Вывод Woocommerce товаров на странице с Elementor с помощью плагина
- Проблема с адаптивными изображениями в Gutenberg редакторе WordPress
- Хаки для страницы категории в WooCommerce
- Топ-5 плагинов для обеспечения безопасности WordPress сайтов
- Friend Hosting — создание WP сайта в один клик, обзор панели управления и плюсов хостера
- Размеры изображений в WordPress — как изменить, добавить свои и удалить лишние
- WooCommerce (44)
- Безопасность (12)
- Видео (6)
- Виджеты (28)
- Возможности (141)
- Вопрос-ответ (6)
- Начинающим (52)
- Новости (46)
- Оптимизация (23)
- Плагины (244)
- Сервисы (85)
- Хаки и секреты (87)
- Шаблоны (44)

- Дизайн Мания - о веб-дизайне и не только.
- Tod's Blog - все про заработок онлайн.
- Вебдванольные заметки - обзоры веб-сервисов.
- Топ-3 видеокарты среднего класса от AMD: зачем платить больше?
- Доработка фильтра для повышения конферсии
- Зачем нужен домен
- Переваги застосування технології розумний будинок
- Дизайн сайта
- DLE (DataLife Engine) — движок для сателлитов
- Играть бесплатно в игровые автоматы без регистрации
- Продвижение сайта через социальные сети