Font substitution on mobile rendering

Forum|Forum|4 years ago
March 13, 2022
2 replies
3073 views

(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

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by SanfordWhiteman

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.)

SanfordWhiteman

New Participant

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_BoeskenAuthor

New Participant

@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

SanfordWhitemanAccepted solution

New Participant

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.)