Вопрос или проблема
Я создаю пользовательскую тему, используя https://them.es/starter-bootstrap. У меня есть несколько пользовательских шрифтов в папке /assets и немного Sass, сгенерированного с помощью http://font.download. Пользовательские шрифты, похоже, включены в скомпилированный CSS, но файлы шрифтов не копируются. Это ошибка из моей панели разработчика:
доступный для загрузки шрифт: сбой загрузки (семейство шрифтов: "Museo 300" стиль:normal вес:400 растяжение:100 индекс источника:1): статус=2147746065 источник: http://example.local/wp-content/themes/example-theme/build/fonts/Museo300-Regular.0c331dbb.woff
Для разработки я запускаю npm run watch. Почему шрифт не копируется в /build/fonts?
Заранее спасибо!
Ответ или решение
Проблема, с которой вы сталкиваетесь, связана с использованием темы, созданной на базе Starter Bootstrap, и включает в себя управление пользовательскими шрифтами, расположенными в папке /assets. Давайте подробно рассмотрим возможные шаги для решения вашей проблемы.
1. Проверка конфигурации сборки
Во-первых, убедитесь, что ваш инструмент сборки (например, Webpack, Gulp или Grunt) настроен на копирование файлов шрифтов из папки исходников в папку build/fonts. Чтобы это проверить, выполните следующие действия:
- Откройте файл конфигурации сборки вашего проекта (webpack.config.js, gulpfile.js и т. п.).
- Найдите правило, отвечающее за обработку шрифтов. Обычно оно выглядит что-то вроде:
{
test: /\.(woff|woff2|ttf|eot|otf)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[hash].[ext]',
outputPath: 'fonts/',
},
},
],
}Убедитесь, что указан правильный путь к файлам шрифтов. Если он отсутствует или неверен, вам необходимо добавить или исправить его.
2. Проверка путей загрузки шрифтов в CSS
Убедитесь, что в скомпилированном CSS, который генерируется вашим Sass, пути к шрифтам указаны правильно. Это можно сделать, найдя правила @font-face:
@font-face {
font-family: 'Museo 300';
src: url('../fonts/Museo300-Regular.woff2') format('woff2'),
url('../fonts/Museo300-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}Проверьте, совпадает ли структура путей с фактической структурой файлов в папке build.
3. Очистка кеша
Иногда браузеры кешируют старые версии файлов. Если вы недавно добавляли шрифты и не видите результата, попробуйте очистить кеш браузера или загрузить страницу в режиме инкогнито.
4. Проверка файлов шрифтов
Убедитесь, что шрифты, которые вы пытаетесь использовать, действительно находятся в папке build/fonts. Если они отсутствуют, значит, сборщик не копирует их. Проверьте, существуют ли файлы в папке assets/fonts или в аналогичном месте, откуда они должны загружаться.
5. Запуск сборки
Убедитесь, что при выполнении команды npm run watch ваш сборщик действительно активирует все настройки, включая копирование файлов шрифтов. Попробуйте использовать команду для полной сборки проекта, например, npm run build, чтобы определить, решит ли это вашу проблему.
6. Устранение ошибок
Код ошибки status=2147746065 может указывать на проблему с доступом к файлам шрифтов. Убедитесь, что права доступа к файлам и директориям установлены правильно. Проверьте, имеют ли PHP и веб-сервер доступ к нужным папкам.
Заключение
Устраняя проблемы с пользовательскими шрифтами в вашем проекте, важно приниматься за системный подход. Проверяйте все этапы от настройки сборки до правильных путей и наличия файлов. Предпринятые шаги могут помочь вам разобраться с проблемой и обеспечить корректное отображение шрифтов в вашем кастомном теме на основе Starter Bootstrap. Если проблема не решится, возможно, стоит обратиться за помощью на форумы разработки или к сообществу пользователей Starter Bootstrap.