Шрифты по-разному отображаются в Firefox для конкретной веб-страницы

Question

Я разрабатываю целевую страницу для веб-сайта по адресу:

https://emotional -wellbeing.com /

Страница хорошо отрисовывается в Chrome, но в FirefoxКонденсированные шрифты Open Sans не отображаются вообще.Я пробовал несколько изменений на этом форуме, но ни одно из них не помогло.

Шрифты Google включают в себя:

<link rel="preload" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Open+Sans+Condensed:700" as="style" onload="this.rel='stylesheet'"/>

Страница является шрифтом Open Sans, за исключением:

<div class="sectionmainheadline"><h1 style="font-family: 'Open Sans Condensed', sans-serif; font-weight:700; font-stretch: condensed;">"Discover How You Can <span style='color: #3a9921;'>Melt Away</span> Away Your Stress & <span style='color: #3a9921;'>Overcome </span>Your Anxiety,<br/><span class='underline'>In As Little As 5 Minutes From Now</span>"</h1></div>

Я использую Bootstrap 4.

Вы можете посмотреть, как это выглядит на Chrome здесь:

Но на Firefox красныйобведенная область не выглядит Open Sans Italic, а синяя обведенная область - это бог знает, какой шрифт!:

Как мне сделать эти обведенные области похожими на версии Chrome?У меня нет идей.

Answer 1

Похоже, что

 <link rel="preload" […] as="style" onload="this.rel='stylesheet'"/>

не работает так, как задумано в FF для начала.Как только я изменю rel на stylesheet в инспекторе вручную, упомянутые части будут отображаться с нужным шрифтом.

Поскольку до этого я даже не вижу запроса на URL таблицы стилей, яПредполагается, что это не часть onload, которая здесь идет не так, но FF пока не хочет предварительно загружать таблицы стилей таким образом (?).