Подключение шрифта с Google fonts конфликтет с системным Объединением CSS файлов.

Аватар пользователя VasyOK VasyOK 25 апреля в 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;
}

Все работает, но при включении системного сжатия CSS слетают все стили. Т.е. видны черные буквы на белом фоне.

Если заменить подключение шрифта несколькими строчками (на каждый font-weght):

Тогда работает и со сжатием стилей.

Почему так происходит? В созданной теме что-то быть должно?

Комментарии

Аватар пользователя VasyOK VasyOK 25 апреля в 1:27

Сначала было:
base theme: claro
выставил
base theme: false

Все заработало даже если подключать в одну строчку. Но нет всяких красивых показов системных ошибок Sad

Не понимаю: почему так?

Аватар пользователя gun_dose gun_dose 25 апреля в 17:05

Гугл фонтс поменяли недавно API подключения шрифтов и теперь их цсс-ки очень конфликтуют со многими алгоритмами сжатия. Оптимальный вариант, подключать в head через link, и там заодно preload сразу добавить.

Аватар пользователя gun_dose gun_dose 25 апреля в 19:06


Ой, погнал я , не прелоад, а преконнект. Это такая дрянь, которую сейчас любит пэйджспид предлагать)) Что это, лучше в интернете почитать, в целом полезные штуки.

Аватар пользователя gun_dose gun_dose 25 апреля в 20:09

Суть не в том, как задаётся шрифт, а в том, что гугл фонт генерирует такую ссылку, что многие минификаторы об неё ломаются. Возможно, дело в том, что в ссылке присутствует собака или точки с запятой.

Аватар пользователя gun_dose gun_dose 25 апреля в 21:34

Ну вот короче какая-то дичь. Гуглил помню это дело, проблема встречается иногда. Решения не нашёл. Закинуть это дело через линки в галаву вполне себе вариант.

Аватар пользователя OldWarrior OldWarrior 26 апреля в 2:42

VasyOK wrote:... Если заменить подключение шрифта несколькими строчками (на каждый font-weght) ...

А почему бы вместо @import не попробовать просто подключить гугловскую шрифтовую CSS через библиотеку темы - как 'external'? Ну и поставить ей вес -10 или сколько там нужно.

Аватар пользователя VasyOK VasyOK 6 мая в 12:45

Видимо придеться возвратиться к этому вопросу.
Подключил шрифт в тему через <link rel="preconnect"...

Google page speed все равно ругается на шрифт. Пишет:
/*-----------------------------------*/
Некоторые ресурсы блокируют первую отрисовку страницы. Рекомендуем встроить критическую часть данных JS/CSS в код HTML и отложить загрузку остальных ресурсов
URL
/css2?family=Open+Sans:wght@400;600;700;800&display=swap(fonts.googleapis.com)
/*-----------------------------------*/

Что-то можно сделать, чтобы шрифт подключался, но этого сообщения не было?

подключить гугловскую шрифтовую CSS через библиотеку темы - как 'external'?

- это поможет?

Аватар пользователя VasyOK VasyOK 6 мая в 15:21

Ты прав! Действительно через @font-face пейджспид гораздо лучший результат выдает.