[Resolved] Help with Custom fonts not displaying

[Stacey]

Hi

I’ve set up a landing page and using a custom font following the steps
https://docs.generatepress.com/article/adding-local-fonts/

Font is able to be selected in the customiser (I have it set for H6 for this page to get this up and running)

It is showing on my PC – but I realise that this is because I have the font locally. It’s not showing on any mobile devices or for others when they view the page.

I am able to download the fonts from the URL that I have specified in the CSS – so files are there.
But I know there is something that I’ve missed and hoping that you can help.

Page with the issue:
https://allisonandco.co.uk/allison/

The first line “Hi, I’m Allison” should be using the custom font

CSS:
@font-face {
font-family: ‘Moonstone’;
src: url(‘https://allisonandco.co.uk/wp-content/customfonts/Moonstone-Regular.woff’) format(‘woff’),
url(‘https://allisonandco.co.uk/wp-content/customfonts/Moonstone-Regular.tff’) format(‘truetype’),
font-weight: normal;
font-style: normal;
}

I only have the 2 webfont file formats – is this the problem? I have used the same font on a different website and it’s working fine.

Thanks

[Tom]

Hi there,

That is strange – all seems to be working well.

Did you use the same method on the other site? If so, can I see it?

[Stacey]

I didn’t use the same method on the other site – instead I used the Custom Fonts plugin on that one instead

(the other site is https://swish-it.com)

Do you think that there could be something on the host blocking it?

[Tom]

Ah, you’re missing a ; before font-weight.

Try this:

@font-face { 
    font-family: 'Moonstone'; 
    src: url('https://allisonandco.co.uk/wp-content/customfonts/Moonstone-Regular.eot'); 
    src: url('https://allisonandco.co.uk/wp-content/customfonts/Moonstone-Regular?#iefix') format('embedded-opentype'), url('https://allisonandco.co.uk/wp-content/customfonts/Moonstone-Regular.woff') format('woff'), url('https://allisonandco.co.uk/wp-content/customfonts/Moonstone-Regular.tff') format('truetype');
    font-weight: normal; 
    font-style: normal;
}

[Stacey]

Thanks Tom – that has helped- and when I was testing it – I was copying and pasting that CSS – so not helpful!!

It was still not loading properly – but have switched it to refer to https:// fonts and that is now working.

Do you have any ideas why it wouldn’t be loading over HTTPS?

[Tom]

It looks like you still have some http references in Simple CSS: https://www.screencast.com/t/T1UsvLJ8Z5Dv

[Stacey]

Thanks – closing this one now.

[Author]

Posts