Search code examples
htmlcsswordpressfontsself-hosting

How do I get my self hosted fonts to work?

I'm trying self hosted fonts for the first time, but it doesn't seem to be working.

Can anyone point out what I'm doing wrong?

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;  
}
Solution

  • Use 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.

    Then change the font-family from 

      font-family: Fakt-Blond;

    to 

      font-family: 'Fakt-Blond';

    do the same for mercury-display-roman

    but you shall use it this way

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

    if you open the chrome devtools under Network you will see this

    enter image description here

    Reading: How to fix a website with blocked mixed content