Custom typography not working on mobile devices

Mauer Themes Support Bild Custom typography not working on mobile devices

This topic contains 3 replies, has 2 voices, and was last updated by  Paul 11 months, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1708

    gcorreddu
    Participant

    Hello,

    I just changed the titles and navigation font to a custom Google font using the theme options>fonts entry in my dashboard. However, the changes seem not to apply to mobile devices – only on desktop. I already cleaned the website’s cache from the admin panel. What other options do I have?

    Many thanks,
    Gabriele

    Will Shoot People for Food™
    willshootpeopleforfood.com

    #1723

    Paul
    Keymaster

    Hello Gabrielle,

    It seems that custom fonts may not have been configured correctly. Can you please go to your Admin Panel, then navigate to ‘Theme Options’ -> ‘Fonts’ and make a screenshot of the settings?

    This will help me investigate possible cause of the issue. Thanks.

    Regards,
    Paul

    #1737

    gcorreddu
    Participant

    custom font settings

    These are the Fonts I’d like to implement. It’s worth noting that my website’s typography on mobile looks off even compared to the default fonts:

    actual appearance of website/blog on mobile

    #1748

    Paul
    Keymaster

    Gabriele,

    Thank you for having posted the screenshots.

    You are trying to use Bebas Neue that is not available on Google Fonts. Please see screenshot:

    It says “No matches in the open source catalog. Viewing 1 family from external foundries.”

    If you want to use a font from an external foundry, you need to buy the font from them and integrate it into the theme manually (some custom coding required).

    Or, speaking of Google Fonts alternatives, you may find some fonts with similar feel there. For instance, Oswald is close to Bebas Neue to a certain extent.

    The reason why you have the font displayed on some devices is that operating systems of that devices migh have Bebas Neue installed, or they might have different substitution rules for missing fonts.

    Also:

    Please go to functions.php file in your theme folder. Replace this line:
    .entry-full .entry-title, .entry-full .entry-title a {font-size: 6.0rem;}

    with this (as seen in the picture):
    /* .entry-full .entry-title, .entry-full .entry-title a {font-size: 6.0rem;} */

    Save the file.

    Regards,
    Paul

    P.S.
    I would not recommend using line height of 1 for the theme bundled font. I would suggest not going below 1.5 with that number.

    • This reply was modified 11 months, 1 week ago by  Paul.
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.