添加字体后网站未在 Safari iOS 上加载

Question

我在我的 wordpress 网站上添加了一种新字体。字体正确呈现，并且站点在桌面和移动设备上的 chrome 和 firefox 中正确加载。它也在桌面 safari 上加载，但是在 safari iOS 上，该站点不会加载。它只是卡在加载状态，蓝色水平条位于四分之一的顶部。如果我删除字体，那么问题就会消失。有没有人遇到过这类问题？我无法在网上找到任何解决方案。

我一直在关注this article的建议

this article 说我需要指定字体粗细，但即使我这样做了，问题仍然存在

这是我的代码：

    @font-face {
    font-family: 'Boston Light';  
    src: url('custom-styles/fonts/Boston-Light.woff') format('woff');
}
@font-face {
    font-family: 'Boston Regular';
    src: url('custom-styles/fonts/Boston-Regular.woff') format('woff'); 
}
@font-face {
    font-family: 'Boston SemiBold';  
    src: url('custom-styles/fonts/Boston-SemiBold.woff') format('woff');
}
@font-face {
    font-family: 'Boston Bold';  
    src: url('custom-styles/fonts/Boston-Bold.woff') format('woff');
}
body, button, input, select, textarea, h1, h2, h3, h4, h5, h6, p, .tagcloud a {
    font-family: 'Boston Regular', 'Open Sans', Georgia, sans-serif;
}
.menu-main-navigation-container a,
.menu-main-navigation-container a:hover,
.menu-main-navigation-container a:focus {/*nav items*/
    color: #744364;
    font-family: 'Boston Light', Montserrat, "Helvetica Neue", sans-serif;
}

Answer 1

尝试使用这些字体的 woff2 格式。

我找到了 Boston Regular here 的示例。

Answer 2

我对此没有更深入的了解，但我曾经遇到过类似的问题。 我通过在文件夹前添加/ 更改了路径，它有所帮助。你可能想试一试。

尝试在所有网址的开头添加/，如下所示：

src: url('/custom-styles/fonts/Boston-Light.woff') format('woff');