Использовал функцию @font-face в CSS для импорта шрифта, но он не отображается, как рекламирует создатель. ⇐ CSS

[Anonymous]

Вышеупомянутое image — это то, как должен выглядеть импортированный шрифт (редактировать: первый стиль шрифта), как говорит создатель.


Однако изображение выше выглядит таким, каким оно мне кажется.
Ниже мой CSS. Я добавил text-shadow только в качестве теста. Когда я удаляю текстовую тень, она все равно работает неправильно. Кто-нибудь знает, что я делаю не так?

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

#hero {
display: flex;
flex-direction: column;
border: 3px solid black;
border-radius: 10px;
width: 500px;
margin: auto;
text-align: center;
font-size: 50px;
font-family: reglisse;
text-shadow: 1px 1px 1px black;
}
@font-face {
src: url("Reglisse-0WOD9.otf");
font-family: reglisse;
}
#jdogs{
color: #ff0054;
margin: 5px;
}
#corn {
color: #ffbd00;
margin: 5px;
}
#dogs {
color: #ff0054;
margin: 5px;
}

Я попробовал использовать функцию @font-face, как всегда делаю для импортированных текстов. Изображения выше демонстрируют то, чего я ожидал и каков был на самом деле результат. Через Гугл ответа не нашел. Вот ссылка на страницу создателя: https://www.fontspace.com/reglisse-font-f43313.
Кроме того, я понимаю, что на странице создателя это черно-белое изображение, но мне нужно использовать цвета, которые есть в моем коде.

Подробнее здесь: https://stackoverflow.com/questions/765 ... ing-as-the