Вопрос или проблема
У меня есть этот код:
@font-face {
font-family: 'Miller Banner Light';
src: url('fonts/Miller-Banner-Light-01.eot'); /* Режимы совместимости IE9 */
src: url('fonts/Miller-Banner-Light-01.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/Miller-Banner-Light-01.woff') format('woff'), /* Современные браузеры */
url('fonts/Miller-Banner-Light-01.ttf') format('truetype') /* Safari, Android, iOS */
}
Который теоретически позволяет добавить эти шрифты в мою тему, к сожалению, просто создавая папку fonts и помещая в нее файлы, это не сработает.
Я прочитал о необходимости создания дочерней темы, но это единственный способ?
Я предполагаю, что вы разместили код где-то в вашей текущей теме. Дочерняя тема позволяет не потерять ваши изменения после обновлений темы. На самом деле это гораздо проще, чем кажется.
Если вы хотите понять, почему ваш шрифт не загружается, вы можете поискать ошибки 404 в вашем журнале консоли или попробовать использовать плагин Query Monitor, который покажет вам все пути шрифтов, используемых на текущей странице.
Тем не менее, если вы не уверены в загрузке вашего шрифта программным способом и использовании дочерней темы, или по любой другой причине хотите этого избежать, тогда плагин может быть решением для вас. Use Any Font сделает это в данном случае.
У вас правильная идея.
Я рекомендую обратиться к Google web font helper. Там вы можете найти свой шрифт после того, как вы скачали файлы с сайта google fonts. Затем поместите различные шрифты в отдельные папки шрифтов под их правильными названиями. Затем поместите эти папки в родительскую “папку шрифтов”.
Когда вы перейдете на сайт помощника, обязательно выберите те же параметры, что и прежде, и убедитесь, что вы вводите правильный путь к файлу в текстовом поле под примером таблицы стилей. (т.е. fonts/**)
После того как все это будет на месте, просто скачайте таблицу стилей и поместите ее в “папку шрифтов” и назовите ее fonts.css.
Это должно дать вам возможность ссылаться на каждый шрифт в вашем файле style.css, если вы используете правильный css. Некоторые названия .css для шрифтов немного трудно угадать, но правильные названия (например, font-family: "Comfortaa, san-serif") можно найти на любом из вышеупомянутых сайтов google.
Спасибо, надеюсь, это поможет!
Ответ или решение
Добавление пользовательских шрифтов (локальных) в WordPress может показаться сложной задачей, но, следуя определенным шагам, вы сможете успешно интегрировать шрифты в свою тему. Давайте рассмотрим этот процесс подробно.
Шаг 1: Подготовка шрифтов
Сначала убедитесь, что у вас есть все необходимые файлы шрифтов в разных форматах, таких как .eot, .woff, .ttf. Это позволит обеспечить совместимость с различными браузерами. Разместите эти файлы в папке, которую вы создадите в вашей теме WordPress.
Структура папок:
/wp-content/themes/ваша_тема/fonts/Шаг 2: Код для подключения шрифтов
Как вы уже указали в своем коде, для подключения шрифтов вам нужно использовать правило @font-face. Убедитесь, что вы указываете правильный путь к файлам шрифтов в каждой строке src.
@font-face {
font-family: 'Miller Banner Light';
src: url('fonts/Miller-Banner-Light-01.eot'); /* IE9 Compat Modes */
src: url('fonts/Miller-Banner-Light-01.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/Miller-Banner-Light-01.woff') format('woff'), /* Современные браузеры */
url('fonts/Miller-Banner-Light-01.ttf') format('truetype'); /* Safari, Android, iOS */
}Шаг 3: Подключение CSS
Чтобы ваши шрифты работали, необходимо подключить CSS-код. Вы можете добавить код @font-face в файл стилей вашей темы, обычно это style.css. Убедитесь, что код добавлен в верхнюю часть файла, чтобы он загружался первым.
Шаг 4: Проверка пути
Если шрифт не отображается, проверьте корректность пути к файлам шрифтов. Это можно сделать, открыв консоль разработчика вашего браузера (F12) и проверяя наличие ошибок 404. Также для отладки можно использовать плагин Query Monitor, который покажет все пути к шрифтам, используемым на текущей странице.
Шаг 5: Использование дочерней темы (необязательно)
Хотя создание дочерней темы не является обязательным, это отличный способ сохранить изменения при обновлении основной темы. Если вы решите создать дочернюю тему, все изменения нужно будет делать в ней, используя тот же подход по подключению шрифтов.
Шаг 6: Альтернативные решения с плагинами
Если вы не хотите заниматься кодированием, вы можете воспользоваться плагинами, такими как Use Any Font, которые позволяют легко добавлять пользовательские шрифты через интерфейс администратора.
Шаг 7: Проверка на мобильных устройствах
После того как шрифты добавлены, не забудьте протестировать их отображение на различных устройствах и браузерах. Это гарантирует, что ваш сайт выглядит хорошо на всех платформах.
Заключение
Добавление пользовательских шрифтов в WordPress может быть выполнено с помощью кастомного CSS или с применением плагинов. Следуя указанным шагам, вы сможете успешно интегрировать шрифты в вашу тему. Убедитесь в проверке путей и используйте инструменты разработчика для устранения ошибок. Это обеспечит вам безупречное отображение вашего сайта с индивидуальным стилем, что положительно скажется на пользовательском опыте и восприятии вашего бренда.