25 апреля 2021 в 1:19
У меня уже была похожая проблема, но то была 7ка, а теперь работаю с Drupal 9.
Создаю свою тему . Подключаю в css файл шрифт с google fonts:
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap');
body {
background-color: #1D1D1D;
color: white;
font-weight: 400;
font-family: 'Manrope', sans-serif;
}
body {
background-color: #1D1D1D;
color: white;
font-weight: 400;
font-family: 'Manrope', sans-serif;
}
Все работает, но при включении системного сжатия CSS слетают все стили. Т.е. видны черные буквы на белом фоне.
Если заменить подключение шрифта несколькими строчками (на каждый font-weght):
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@700&display=swap');
Тогда работает и со сжатием стилей.
Почему так происходит? В созданной теме что-то быть должно?
Комментарии
Сначала было:
base theme: claro
выставил
base theme: false
Все заработало даже если подключать в одну строчку. Но нет всяких красивых показов системных ошибок
Не понимаю: почему так?
Гугл фонтс поменяли недавно API подключения шрифтов и теперь их цсс-ки очень конфликтуют со многими алгоритмами сжатия. Оптимальный вариант, подключать в head через link, и там заодно preload сразу добавить.
preload - это что?
Ой, погнал я , не прелоад, а преконнект. Это такая дрянь, которую сейчас любит пэйджспид предлагать)) Что это, лучше в интернете почитать, в целом полезные штуки.
А если бы шрифт был задан из файлов через font-face, то что?
Суть не в том, как задаётся шрифт, а в том, что гугл фонт генерирует такую ссылку, что многие минификаторы об неё ломаются. Возможно, дело в том, что в ссылке присутствует собака или точки с запятой.
У меня минификаторы ломаются и от font-face - без Гугла.
Ну вот короче какая-то дичь. Гуглил помню это дело, проблема встречается иногда. Решения не нашёл. Закинуть это дело через линки в галаву вполне себе вариант.
А почему бы вместо @import не попробовать просто подключить гугловскую шрифтовую CSS через библиотеку темы - как 'external'? Ну и поставить ей вес -10 или сколько там нужно.
Видимо придеться возвратиться к этому вопросу.
Подключил шрифт в тему через
<link rel="preconnect"...Google page speed все равно ругается на шрифт. Пишет:
/*-----------------------------------*/
Некоторые ресурсы блокируют первую отрисовку страницы. Рекомендуем встроить критическую часть данных JS/CSS в код HTML и отложить загрузку остальных ресурсов
URL
/css2?family=Open+Sans:wght@400;600;700;800&display=swap(fonts.googleapis.com)
/*-----------------------------------*/
Что-то можно сделать, чтобы шрифт подключался, но этого сообщения не было?
- это поможет?
Скачай шрифты, положи локально
Ты прав! Действительно через @font-face пейджспид гораздо лучший результат выдает.