Archived topic
Problem load font only mobile
9 replies · Started by alexis on October 4, 2022
Hello,
I have a problem loading fonts on mobile on Chrome and Safari. I load the Satoshi-MediumItalic font for the introduction and conclusion parahgraphs. On desktop it's ok.
Hi there,
This is what I see on my computer, can you check if this is the correct font?
https://www.screencast.com/t/XC1iOZsOoTer
But no on mobile. No se meme italic. Yes this is the right font
Sorry misunderstood your question.
How did you add the font? Is it hosted locally on your server?
Did you add@font-faceCSS?
Please check this documentation for reference:
https://docs.generatepress.com/article/adding-local-fonts/
Let me know :)
Yes, I add this code and I import the police in the wordpress. On chrome and firefox in desketop I can see the Satoshi-MediumItalic font but on mobile not. It is applied on the introduction and conclusion paragraphs
/* Police */
@font-face {
font-family: 'Satoshi-Regular';
src: url('***/wp-content/uploads/2022/10/Satoshi-Regular.eot'),
/* IE9 Compat Modes */
url('***/wp-content/uploads/2022/10/Satoshi-Regular.eot#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('***/wp-content/uploads/2022/10/Satoshi-Regular.woff2') format('woff2'),
/* Super Modern Browsers */
url('***/wp-content/uploads/2022/10/Satoshi-Regular.woff') format('woff'),
/* Pretty Modern Browsers */
url('***/wp-content/uploads/2022/10/Satoshi-Bold.ttf') format('truetype'),
/* Safari, Android, iOS */
url('***/wp-content/uploads/2022/10/Satoshi-Regular.svg') format('svg');
font-weight: 400;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Satoshi-MediumItalic';
src: url('***/wp-content/uploads/2022/10/Satoshi-MediumItalic.eot'),
/* IE9 Compat Modes */
url('***/wp-content/uploads/2022/10/Satoshi-MediumItalic.eot#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('***/wp-content/uploads/2022/10/Satoshi-MediumItalic.woff2') format('woff2'),
/* Super Modern Browsers */
url('***/wp-content/uploads/2022/10/Satoshi-MediumItalic.woff') format('woff'),
/* Pretty Modern Browsers */
url('***/wp-content/uploads/2022/10/Satoshi-MediumItalic.ttf') format('truetype'),
/* Safari, Android, iOS */
url('***/wp-content/uploads/2022/10/Satoshi-MediumItalic.svg') format('svg');
font-weight: 500;
font-display: swap;
font-style: italic;
}
@font-face {
font-family: 'Satoshi-Bold';
src: url('***/wp-content/uploads/2022/10/Satoshi-Bold.eot'),
/* IE9 Compat Modes */
url('***/wp-content/uploads/2022/10/Satoshi-Bold.eot#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('***/wp-content/uploads/2022/10/Satoshi-Bold.woff2') format('woff2'),
/* Super Modern Browsers */
url('***/wp-content/uploads/2022/10/Satoshi-Bold.woff') format('woff'),
/* Pretty Modern Browsers */
url('***/wp-content/uploads/2022/10/Satoshi-Bold.ttf') format('truetype'),
/* Safari, Android, iOS */
url('***/wp-content/uploads/2022/10/Satoshi-Bold.svg') format('svg');
/* Legacy iOS */
font-weight: 700;
font-display: swap;
font-style: normal;
}
Hi Alexis,
How are you adding this? I can't seem to see it, viewing your site.
Can you try adding it in Appearance > Customize > Additional CSS.
I added it in my child theme you should see in the inspector. Line 830 css file generatpress-child
I see. Thank you for clarifying.
I tried viewing it on my end on mobile, and it seems the Font is loading as expected.
Can you confirm if this is the correct font?: https://share.getcloudapp.com/8Lu10dqG
If it is, can you try clearing your mobile's browser cache?
Sorry, Yes I had other people test the url, it's good. It must come from the operator because by emptying the cache it is not good
Probably. There's also Operator, Modem, Network cache sometimes. Glad it's working now!