Custom font in email layout not applying to all content

[Shivani A]

I have set up a custom font for an email template and email layout.

1. The notifications that use this email template have inline styles that override it by setting a different font family.

2. The email scripts used in these notifications also include their own styling and font family.

Is there an easy way to enforce the custom font across all notifications that currently use, and any new ones that might use this template, without having to update each email script or notification individually?

[swapnali ombale]

Hi @Shivani A 

Check this link

https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB0783405

Kindly mark my answer as helpful and accept solution if it helped you in anyway. 

[Shivani A]

Yes, I did set it up similarly. The issue is, if the notification's message HTML contains a font-family setting, or if it's defined within the email script, that takes precedence and overrides the font used in the email layout.

[Vegard S · Accepted solution]

That's because inline styles will always override CSS style definitions. Because it's more specific. 
What you need to do in the Email Layout is to add an !important to the css style.

If that doesn't work either, make sure the style selector is specific enough. 

But in principle this should work:

// Should apply to everything
body, html {      
      font-family: 'your font', sans-serif !important;
}

// Target all elements
* {      
      font-family: 'your font', sans-serif !important;
}

// Targets the paragraphs specifically
p {      
      font-family: 'your font', sans-serif !important;
}

// Targets headings specifically
h1, h2, h3, h4, h5, h6 {      
      font-family: 'your font', sans-serif !important;
}

Ideally, you should only have to do something like this in your email layout to create a baseline that's enforced regardless of the styles set in each notification or template. 

<style type="text/css">
	* {
		-webkit-text-size-adjust: none;
		font-family: Arial, sans-serif !important;
	}

	body {
		font-family: Arial, sans-serif !important;

		p {
			font-size: 16px !important;
		}

		h1 {
			font-weight: 600 !important;
		}

		a {
			text-decoration: underline !important;
			color: #3C3CC8;
		}
	}
</style>

So play around with it and test how it behaves in different email applications. 

Note that the old Outlook has it's own weird way of styling, and likes inline styling, so it might discard some of these. 

The new outlook however does use css styles. 

[Shivani A]

Thanks much. Missed the specificity part, which was the issue.
Outlook/Gmail doesn’t support custom fonts, except for the ones they already do right?