Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #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?



    Hey jstonestreet,

    Did you check if you devices has the font in question installed?

    Best regards,


    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;



    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,


    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?



    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,


    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!


    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,

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