Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 14, 2024 at 6:24 pm #1434311
    jstonestreet

    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

    February 16, 2024 at 12:05 pm #1434491
    Rikard

    Hey jstonestreet,

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

    Best regards,
    Rikard

    February 16, 2024 at 3:39 pm #1434511
    jstonestreet

    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 5 months, 1 week ago by jstonestreet.
    February 16, 2024 at 5:30 pm #1434526
    Rikard

    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

    February 16, 2024 at 5:54 pm #1434529
    jstonestreet

    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?

    February 17, 2024 at 11:11 am #1434554
    Rikard

    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

    February 17, 2024 at 4:54 pm #1434582
    jstonestreet

    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!

    February 17, 2024 at 7:36 pm #1434608
    Mike

    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

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