Archived topic
Help with Custom fonts not displaying
6 replies · Started by Stacey on April 7, 2020
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
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?
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?
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;
}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?
It looks like you still have some http references in Simple CSS: https://www.screencast.com/t/T1UsvLJ8Z5Dv
Thanks - closing this one now.
