@font-face 似乎没有显示，尽管它正在下载中

问：

这是我正在开发的一个网站： https://wolfies-whisky-ltd.myshopify.com（密码：射击）

我使用@font-face来加载显示良好的字体 - RightGrotesk系列。（我计划稍后添加 WOFF 和 WOFF2 字体文件，但由于它现在正在工作，所以保持原样。

@font-face {
    font-family: "RightGrotesk-CompactBlack";
    src: url("{{ 'RightGrotesk-CompactBlack.otf' | asset_url }}") format("opentype");
}

我为身体系列现代打字机使用了完全相同的@font面声明，但这个没有显示。因此，我添加了所有可能的格式。

/* Font declaration */
@font-face {
    font-family: "Modern Typewriter";
    src: local('Modern Typewriter'), url('https://cdn.shopify.com/s/files/1/0786/3933/3697/files/MODERNTYPEWRITER.eot?v=1694793617'); /* IE9 Compat Modes */
    src: local('Modern Typewriter'), url('https://cdn.shopify.com/s/files/1/0786/3933/3697/files/MODERNTYPEWRITER.eot?v=1694793617?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('https://cdn.shopify.com/s/files/1/0786/3933/3697/files/ModernTypewriter.otf?v=1694793617') format('opentype'), /* Super Modern Browsers */
            url('https://cdn.shopify.com/s/files/1/0786/3933/3697/files/MODERNTYPEWRITER.woff2?v=1694793617') format('woff2'), /* Super Modern Browsers */
            url('https://cdn.shopify.com/s/files/1/0786/3933/3697/files/MODERNTYPEWRITER.woff?v=1694793617') format('woff'), /* Pretty Modern Browsers */
            url('https://cdn.shopify.com/s/files/1/0786/3933/3697/files/MODERNTYPEWRITER.ttf?v=1694793617')  format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
}

/* The CSS declaration that is taken into account */
body {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: 100%;
    min-height: 100%;
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: 0.06rem;
    font-family: "Modern Typewriter", Courier, serif;
    font-style: normal;
    font-weight: normal;
}

我试过声明字体样式和字体粗细，我试过不声明它们。是否使用 local（）。不同的字体格式等。

在 Inspect 元素中，如果我单击字体应该出现的文本，您可以看到它使用了上面的 body 声明，因此它不会被不同的类或父元素覆盖......

在检查器工具中检查“网络”选项卡时，我可以看到它已下载正常，状态代码为200。

所以，我真的不确定为什么它没有被显示出来？目前，它加载了其后备字体 Courier，这意味着它也在读取正确的 CSS 声明，而不是在另一个 CSS 文件中进一步隐藏的声明。

如果我在计算机上本地安装字体，它确实会显示出来，但这不是很有用。

有什么想法吗？