Custom font not showing properly

Support
#1

Hi,

I’ve uploaded a couple of custom fonts provided by my client. However, they are not showing on the front end on Safari, despite emptying the cache (both locally and on the server). I have it set for a custom headline and have applied css.

Strangely, it looks okay on Firefox and Chrome (I think) and also on my iPhone. It’s just Safari on my desktop.

This is an example (currently on a temp domain)
http://77.104.180.227/~theweb53/themagicofyoga.co.uk/about-me/

Also, it looks like there is some bold set for the custom headline element I’m using. How do I remove this?

Can you help?

#2

Hello There,

Thanks for writing in! I have investigated the issue and found out that there are missing font files. I can see that you used this code:

@font-face {
    font-family: 'swiss-light';
    src: url('http://77.104.180.227/~theweb53/themagicofyoga.co.uk/wp-content/fonts/swissl-webfont.woff2') format('woff2'),
         url('http://77.104.180.227/~theweb53/themagicofyoga.co.uk/wp-content/fonts/swissl-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'swiss-roman';
    src: url('http://77.104.180.227/~theweb53/themagicofyoga.co.uk/wp-content/fonts/swiss-webfont.woff2') format('woff2'),
         url('http://77.104.180.227/~theweb53/themagicofyoga.co.uk/wp-content/fonts/swiss-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

The problem with this is that you only loaded .woff and woff2 files. You still need the ttf, eot, otf and other font file format for more browser compatibility. To know more about @font-face and browser compatibily, please check this out:


https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Hope this helps.

#3

Ah! That fixed it. Thanks.

#4

Glad to hear it’s sorted.

Cheers!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.