[Resolved] Problem load font only mobile

[alexis]

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.

[Ying]

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

[alexis]

But no on mobile. No se meme italic. Yes this is the right font

[Ying]

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 🙂

[alexis]

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;
}

[Fernando]

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.

[alexis]

I added it in my child theme you should see in the inspector. Line 830 css file generatpress-child

[Fernando]

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?

[alexis]

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

[Fernando]

Probably. There’s also Operator, Modem, Network cache sometimes. Glad it’s working now!

[Author]

Posts