Archived topic
3 Custom Fonts: 3 working on desktop, only 2 working on mobile
7 replies · Started by Lois on October 7, 2020
Hello,
I uploaded 3 custom fonts. All 3 are working beautifully on desktop. Two of the fonts are working on mobile, but one of the fonts is not working on mobile at all - it's just showing Times New Roman where the script font should be.
Here is the CSS I've been using:
@font-face {
font-family: 'astria';
src: url('https://edwinakiernan.com/wp-content/themes/generatepress_child/fonts/astria_font-webfont.woff2') format('woff2'),
url('https://edwinakiernan.com/wp-content/themes/generatepress_child/fonts/astria_font-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'palominoscr_rgregular';
src: url('https://edwinakiernan.com/wp-content/themes/generatepress_child/fonts/PalominoScr-Rg.woff2') format('woff2'),
url('https://edwinakiernan.com/wp-content/themes/generatepress_child/fonts/PalominoScr-Rg.woff') format('woff');
src: url('https://edwinakiernan.com/wp-content/themes/generatepress_child/fonts/PalominoScr-Rg.ttf') format('ttf'),
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'mrdarcyregular';
src: url('https://edwinakiernan.com/wp-content/themes/generatepress_child/fonts/mrdarcyregular-webfont.woff2') format('woff2'),
url('https://edwinakiernan.com/wp-content/themes/generatepress_child/fonts/mrdarcyregular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
I'm baffled, because it's only one of the fonts not working on mobile and I have no idea why.
It's the script font in the box with the fountain pen graphic, just under the menu. Text reads: About
Same story for each of the menu pages. (and on the homepage, but the homepage is under construction and doesn't have the menu on it yet)
Page URL to check: https://edwinakiernan.com/about
Thank you.
Hi there,
Just to confirm, you've uploaded the font using the instructions here?
https://docs.generatepress.com/article/adding-local-fonts/
Yes. They're not Google fonts. I downloaded the web files from each site used to purchase the fonts and uploaded the fonts, then used the @font-face steps. The strange thing is that the Palomino font is working perfectly on desktop but won't show on mobile. The others are working on both desktop and mobile, and I did exactly the same install process with each of them.
Are you sure it's working on desktop?
This is what I'm seeing:
https://www.screencast.com/t/FoNlCvTZ
It's working on my Chrome browser even when I open an incognito window... that's so strange.
I think the issue here is you've defined the name in your @font-face like this:
font-family: 'palominoscr_rgregular';
But your CSS is calling for this:
font-family: "PalominoScr-Rg";
What happens if you change one of them to match the others?
Yes! That is working on mobile for me, now! Thank you so much!
Is it working when you look at it?
It should match the script font in the website title, at the top...
It's working for me now as well :)
Glad I could help!
