Коротко — проблема обычно не в самом WordPress/Greenshift, а в том, как шрифт отдан браузеру мобильного: формат, заголовки (CORS / MIME), CSS‑описание или мобильные настройки/оптимизация темы могут блокировать/заменять ваш шрифт. Вот пошагово как выяснить и исправить.
1) Сначала проверьте ошибки в консоли (удалённая отладка)
- Android: подключите телефон к ПК и откройте Chrome DevTools (Remote devices) — посмотрите сеть и консоль.
- iOS: подключите iPhone к Mac и откройте Safari Web Inspector.
Ищите ошибки загрузки файлов шрифта (404), CORS‑ошибки или сообщения о неподдерживаемом формате.
2) Убедитесь, что шрифты доступны в форматах, которые поддерживают мобильные браузеры
Рекомендуется иметь как минимум woff2 и woff (и/или ttf для старых устройств). Пример @font-face:
@font-face {
font-family: "Gilroy";
src: url("/wp-content/uploads/fonts/gilroy-regular.woff2") format("woff2"),
url("/wp-content/uploads/fonts/gilroy-regular.woff") format("woff"),
url("/wp-content/uploads/fonts/gilroy-regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
3) Проверьте CORS (самая частая причина)
Если шрифты грузятся с другого домена/поддомена или CDN — мобильные браузеры (особенно iOS) могут блокировать их без заголовка Access-Control-Allow-Origin. Для Apache (в .htaccess) добавьте:
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
Для Nginx:
location ~* \.(eot|ttf|woff|woff2)$ {
add_header Access-Control-Allow-Origin "*";
}
4) Проверьте MIME‑типы
Сервер должен отдавать правильные MIME-типы (особенно для woff2). В .htaccess можно добавить:
AddType font/woff2 .woff2
AddType font/woff .woff
AddType application/font-sfnt .ttf .otf
5) Проверьте CSS: веса/стили
Если у вас несколько весов — для каждого должен быть свой @font-face с конкретным font-weight/font-style. Иначе браузер может подставить системный шрифт.
6) Проверьте плагины/оптимизацию и настройки темы
- Плагины оптимизации (Autoptimize, WP Rocket и т.п.) могут объединять/деферить шрифты или заменять их системными на мобиле. Временно отключите такие плагины и проверьте.
- Тема/конструктор может иметь опцию «Disable custom fonts on mobile» — проверьте настройки Greenshift/Customizer.
7) Кеш/CDN
Очистите кеш сайта, браузера и CDN (Cloudflare и т.п.) после правок.
8) Если ничего не помогает — используйте проверенные инструменты
- Сгенерируйте пакеты шрифтов через FontSquirrel (Webfont kit) — там будет правильный набор форматов и CSS.
- Плагины WordPress: «Use Any Font», «Custom Fonts» — помогут корректно зарегистрировать локальные шрифты в WP.
Короткий чеклист для быстрого теста
1. Откройте мобильную консоль и посмотрите ошибки загрузки шрифта.
2. Если CORS — добавьте Access-Control-Allow-Origin.
3. Если 404 — проверьте путь к файлам и права.
4. Добавьте woff2 + woff в @font-face + font-display.
5. Очистите кешы и повторно протестируйте.
Если хотите, пришлите URL сайта (или примеры путей к файлам шрифтов и ваш текущий @font-face код) — проверю конкретно и скажу, что именно исправить.