SOLVED

Font substitution on mobile rendering

Go to solution
Tracy_Boesken
Level 4

Font substitution on mobile rendering

Tracy_Boesken_0-1647215255321.png

(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:

HIMSS LP mobible font.jpg

Is there a way to fix this?

 

Thanks,

--Tracy

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Font substitution on mobile rendering


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

View solution in original post

6 REPLIES 6
Jo_Pitts1
Level 10 - Community Advisor

Re: Font substitution on mobile rendering

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
Level 4

Re: Font substitution on mobile rendering

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

Android screenshot.png

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
Level 10 - Community Advisor

Re: Font substitution on mobile rendering

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

 

SanfordWhiteman
Level 10 - Community Moderator

Re: Font substitution on mobile rendering

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
Level 4

Re: Font substitution on mobile rendering

@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
Level 10 - Community Moderator

Re: Font substitution on mobile rendering


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