CODEWITHSUNDEEP
htmlcsswordpressfontsself-hosting
tunis
tunis

Reputation: 15

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

Upvotes: 0

Views: 122

Answers (1)

Gildas.Tambo
Gildas.Tambo

Reputation: 22653

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

Upvotes: 1

Related Questions