如何让我的自托管字体工作？

Question

我第一次尝试使用自托管字体，但它似乎不起作用。

谁能指出我做错了什么？

https://treasure.studiothensome.com/home-2/

    font-family: mercury-display-roman; 
    src: url('http://www.treasure.studiothensome.com/wp-content/themes/treasure/fonts/MercuryDisplay-Roman_Web.woff');  
    font-weight: normal;  
}
@font-face {
    font-family: Fakt-Blond; 
    src: url('http://www.treasure.studiothensome.com/wp-content/themes/treasure/fonts/Fakt-Blond.woff');  
    font-weight: normal;  
}

Answer 1

使用https

如果您的网站提供 HTTPS 页面，则所有活动的混合内容 默认情况下，此页面上通过 HTTP 传递的内容将被阻止。 因此，您的网站可能会在用户看来损坏（如果 iframe 或 插件不加载等）。被动混合内容显示为 默认，但用户可以设置偏好来阻止此类内容， 也是。

然后将font-family从

  font-family: Fakt-Blond; 

到

  font-family: 'Fakt-Blond'; 

对mercury-display-roman做同样的事情

但你应该这样使用它

@font-face {
    font-family: 'Fakt-Blond';
    src: url('wp-content/themes/treasure/fonts/Fakt-Blond.woff');
    font-weight: normal; 
}

如果你在Network下打开chrome devtools你会看到这个

阅读：How to fix a website with blocked mixed content