57
Views
2
Comments
Solved
Multiple font family for email templates
Application Type
Reactive

Hello,

I'm developing email templates for a multi brand portal. For every brand, the email templates will have different design with different font-family. and for the screens in the portal, the font-family will be "Arial" throughout. I tried adding different font-family to each container by adding them to resources, but it didn't apply them individually. Unless I apply to "html { font-family: xxx; }', it doesn't take any font. 

I also tried with !important thinking it would be due to specificity but it didnt work.

Thanks,

Aman

2024-04-15 16-08-47
Aman Devrath
Solution

Unfortunately, I couldn't customize a lot in the email templates.

Why? Because, email clients have limited scope of CSS customization. 

What I did : I had to convince the client to not use multiple fonts for email templates as it is not supported (unless fonts are "Email Safe")

Important Note: you have to check the list of supported font styles. Email clients won't support it unless it is in the supported list of fonts. 

Check for more details here : Email Safe Fonts vs Custom Fonts

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Hi Aman,

Be aware that e-mail is notoriously difficult to style, as e-mail apps filter out a lot of the CSS. Using external fonts is almost always impossible, for example.

2024-04-15 16-08-47
Aman Devrath
Solution

Unfortunately, I couldn't customize a lot in the email templates.

Why? Because, email clients have limited scope of CSS customization. 

What I did : I had to convince the client to not use multiple fonts for email templates as it is not supported (unless fonts are "Email Safe")

Important Note: you have to check the list of supported font styles. Email clients won't support it unless it is in the supported list of fonts. 

Check for more details here : Email Safe Fonts vs Custom Fonts

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.