Font substitution on mobile rendering

[Tracy_Boesken]

(Landing page) The font for "Thanks for visiting..." and the subtitles is Arial Black 

<span style="font-size: 20px; font-family: 'arial black', 'avant garde';"><span style="color: #333f48;"><strong>Thanks for visiting

But when I view it on iOS it changes to a serif or Times:

Is there a way to fix this?

Thanks,

--Tracy

[Jo_Pitts1]

Tracy,

is there a media query that is resetting the font?

Is it just iOS or Android as well?

BTW - you'd be better off defining the styles in CSS and then referencing by class.  It separate content vs. styling (the intent of HTML vs. CSS)

[Tracy_Boesken]

@Jo_Pitts

It appears to be only iOS that is changing the font.

Android looks mostly correct. (the second heading is san-serif but not bold).

Since this is a landing page, I am using the rich text editor to designate the font...are you saying there is another way of doing it?

---

you'd be better off defining the styles in CSS and then referencing by class.  It separate content vs. styling (the intent of HTML vs. CSS)

---

Thanks,

--Tracy

[Jo_Pitts1]

Let's sort the nav issue first, and loop back to this one 🙂

[SanfordWhiteman]

Your font stack doesn't include sans-serif so you shouldn't expect fallback to a generic sans. That's the idea of having a cascade of high-priority to low-pri fonts.

Arial Black isn't native on either mobile OS but is available as a webfont (from MyFonts).

[Tracy_Boesken]

@SanfordWhiteman  I am using the rich text editor. Marketo doesn’t designate another sans-serif  font if the first isn’t found? Do I have to add additional code each time I want to use that font (it will be often because they picked it for branding.)

Thanks,

—Tracy

[SanfordWhiteman · Accepted solution]

---

Marketo doesn’t designate another san-serif  font if the first isn’t found?

---

Not if the final rendered font stack is what you posted, no.

I don’t use the Rich Text dropdown to select fonts as it clearly selects fonts that aren’t present on all clients (same, by the way, as the Rich Text editor here on the Community, which isn’t a Marketo product!).

---

Do I have to add additional code each time I want to use that font (it will be often because they picked it for branding.)

---

I’d recommend you don’t have them choose a font from the WYSIWYG editor at all. Manage everything via CSS. It makes for consistent, predictable branding. The fact they chose Arial Black without testing cross-platform is a sign they need more lockdown, IMO. (Even if there were a sans fallback, that’s still breaking the brand on one big OS.)