[Resolved] Added local fonts do not work properly on mobile phone

[Milos]

Hi there.

I added google fonts (wolf and wolf2) to local system fonts as you describe in GP documentation. I used Simple CSS and Snippets as well. Im using Oswald font (H1) and PT Sherif (H2-H6). In Customizer and in the Chrome browser developer view looks all in responsive designs from desktop to mobile ok – there are Oswald and PT Sherif on the right place. But when I visit my website with my two mobile phones in Chrome ( Android 6 and Android 8 ) there is only Oswald font everywhere (or only PT Sherif as before…)

Some weird stuff that I noticed:

1. After I added local fonts to Customiser my website used only PT Sherif everywhere (H1-H6) and in all responsive designs in Customizer. I could not change it in H1 or in Prime navigation to Oswald by just choosing Oswald font within System fonts. Only when I choose System Stack within System fonts has it then succeeded in all responsive designs in Customizer and in Chrome desktop view but on my mobile phones it has changed the only one everywhere used font PT Sherif with another one everywhere used font Oswald.

2. When I try to change Google font PT Sherif with System font PT Sherif, put in publish button, leave Customizer and come back again PT Sherif use Google font again…but in Chrome developer – Source view Google fonts have disappeared…

Could you help me please?

I will send you the password to my website separately.

[David]

Hi there,

can you send the password using the Account Issue form:

https://generatepress.com/contact/

Please include the URL of this topic.

[David]

Can you check the URLs in your @font-face CSS.
I see some of them start with:

.https:// instead of https://

Also check the URL is correct – as i tried following the correct link and the font file was not located there.

[Milos]

I have removed by URL not only . before https:// but also ` at the beginn and at the end of the URL.
So instead (.https://.......) only (https://…….)

By clicking on the permalink in Media/Details I am landing on my homepage. When I copy URL in CSS or in Media and paste in Google I am landing on my neutral site without content and get message “This site could not be found”…

The same problem is still there and the strange inflexible behavior in Customizer, which I described earlier as well.

[David]

That means the Fonts are not at that URL. If they were then browser would download them.
Can you check the URLs ?

[Milos]

Hi David.

In the meantime I have made progress. I have uploaded the Google fonts again to WordPress Media and added to Customizer again with the result that both Oswald and PT Sherif are on the right place now in all responsive designs.

But I could not see any fonts by just clicking the URL…

Some weird stuff did not change as well:

When I try to replace both fonts within Google fonts with the same System fonts in Customizer it seems to be all ok. Then I put Publish button, leave Customizer and come back: both fonts Oswald and PT Sherif used are within Google fonts again! Is this a software bugg?

After my up-to-date report you probably believe Im still using Google fonts instead of local fonts. BUT:

1. I do not see any Google fonts in Chrome developer-source view
2. I activated Remove Google fonts in Autooptimize
3. By webpagetest.org result in Request Details I found my local fonts as e.g #9 Resource Url: https:/………/wp-content/uploads/2020/07/pt-serif-v11-latin-regular.woff2
I could send you URL of the results but I do not know how to do it without to publish.

You no longer need a password for my website.

[Tom]

One way to ensure the Customizer doesn’t get confused is to name your local fonts something else. So if you’re using Oswald, call it Oswald Local as your @font-face font-family value.

[Milos]

Ok I tried to change the name in Simple CSS:
instead
font-family: Oswald
to
font-family: Oswald Local

The result is when I replaced Oswald within Google fonts with Oswald within System fonts in Customizer that I lost Oswald font in content (H1) and I got there PT Serif instead as H1…Even going back to Oswald Google fonts did not change H1 from PT Serif to Oswald back. First when I’ve removed Local in font-family I could use Oswald as H1 in content again…

Where should I change the name exactly? Only in font-family in Simple CSS?

[Tom]

You would change it in:

1. Your @font-face CSS.
2. Your PHP filter:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Oswald Local';

    return $fonts;
} );

[Milos]

Perfect! It works! Any chance to add it to your Adding local fonts ?

Thank you so much. I appreciate your work. 🙂

[Tom]

Good idea!

Glad we could help 🙂

[Paul]

Hello,

Yes, adding the ‘Local’ to the name was the only thing that made it work for me as well.

[Author]

Posts