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

Home Forums Support Added local fonts do not work properly on mobile phone

  • This topic has 10 replies, 3 voices, and was last updated 2 months ago by Tom.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1372673
    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.

    #1372983
    David
    Staff
    Customer Support

    Hi there,

    can you send the password using the Account Issue form:

    https://generatepress.com/contact/

    Please include the URL of this topic.

    #1373080
    David
    Staff
    Customer Support

    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.

    #1373325
    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.

    #1373397
    David
    Staff
    Customer Support

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

    #1376988
    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.

    #1377188
    Tom
    Lead Developer
    Lead Developer

    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.

    #1378251
    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?

    #1378571
    Tom
    Lead Developer
    Lead Developer

    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;
    } );
    #1378960
    Milos

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

    Thank you so much. I appreciate your work. 🙂

    #1379395
    Tom
    Lead Developer
    Lead Developer

    Good idea 🙂

    Glad we could help 🙂

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.