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

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

If your website delivers HTTPS pages, all active mixed content delivered via HTTP on this pages will be blocked by default. Consequently, your website may appear broken to users (if iframes or plugins don't load, etc.). Passive mixed content is displayed by default, but users can set a preference to block this type of content, as well.

然后将 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

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

How do I get my self hosted fonts to work?

html

css

wordpress

fonts

self-hosting