Firefox在特定网页上的字体呈现方式不同

Question

我正在为以下网站开发目标网页：

https://emotional-wellbeing.com/

该页面在Chrome中呈现正常，但在Firefox中，Open Sans Condensed字体根本不显示。我已经尝试过这个论坛的一些变化，但都没有帮助。

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不希望以这种方式预加载样式表一般（？）。