Декларация @import шрифта CSS ⇐ Html

[Anonymous]

У меня возникла проблема со шрифтом CSS @import. Следующее работает (шрифт отображается как ожидалось):

Код: Выделить всё

*, *::before, *::after {
margin: 0;
padding: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=Unbounded:wght@400;500;600&display=swap');

h1, h2, h3, h4, h5, h6 {
font-family: 'Unbounded', cursive;
}

Если я сделаю что-нибудь из этого:

• переместите @import в начало файла
• переместите импорт в раздел html
• удалите *, *::before, *::after< /code> блок

шрифт не отображается дольше.
Моя цель — переместить импорт в раздел . Какой рекомендуемый способ решить эту проблему?
Пример: https://codepen.io/xyzuser/pen/raBvRjK
Вот как это должно выглядеть:


Вот как это выглядит после удаления блока *, *::before, *::after:



Обновление: Я закончил я использовал другой шрифт, и это решило проблему.

Подробнее здесь: https://stackoverflow.com/questions/793 ... eclaration