Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1434311

    I set the Heading Font to Arial Black in the General Styling: Fonts section. It displays correctly on my laptop, even if I shrink the browser window down to mobile width. However, it shows what looks like Times New Roman on two different iPhones using Safari. I tried setting it manually in the Quick CSS using !important, but that doesn’t work. I also tried other fonts from the Heading Font dropdown list. They all display correctly on desktop, but mobile headings remain unchanged. And ideas what could be causing this?

    Thanks!
    JP

    #1434491

    Hey jstonestreet,

    Did you check if you devices has the font in question installed? https://developer.apple.com/fonts/system-fonts/

    Best regards,
    Rikard

    #1434511

    Yes. Arial Black is a standard font on iOS. I also tried other standard web-safe fonts.

    Arial Black is now displayed correctly on mobile for both the blog headings and H tags used inside Text Blocks. Did you change something?

    However, it’s now showing what looks like Open Sans or Arial Narrow on the headings that use the Special Heading Content Element in the editor.

    I tried adding this to the Quick CSS but it had no impact:
    .av-special-heading-tag {
    font-family: “Arial Black”!important;
    }

    • This reply was modified 10 months, 1 week ago by jstonestreet.
    #1434526

    Hi,

    I didn’t change anything, so you might be having a local problem. Also please try to include more than one font in your CSS, in case the first font should not be available.

    Best regards,
    Rikard

    #1434529

    I removed the CSS since it didn’t affect the mobile display. Any idea why the Special Heading shows a different font on mobile and also on an iPad than on a laptop? By selecting the font in General Styling: Fonts, shouldn’t the font be the same on every device regardless of screen size?

    Were you able to see the different fonts on your mobile device compared to a laptop?

    #1434554

    Hi,

    If you look at the link I sent above, then you will see that Arial Black is not listed as a system font for ios and ipad. I couldn’t find a similar list for android, but it’s not picking up the correct font on my own device either. I would suggest that you use the regular Arial font as your primary font instead, or use Arial Black as the primary, then regular Arial and the secondary font.

    Best regards,
    Rikard

    #1434582

    You’re right! I missed that tiny download icon next to the font. Rather than deal with that, I changed the Heading Font to Arial and used the Quick CSS to set the font-weight to 600. Now it looks the same on laptop, table and mobile. Thanks!

    #1434608

    Hi,
    Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Heading Font Different on Mobile’ is closed to new replies.