Custom font in email layout not applying to all content

Shivani A
Tera Contributor

 

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?

 

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

View solution in original post

5 REPLIES 5

Ankur Bawiskar
Tera Patron
Tera Patron

@Shivani A 

the font will get overriden if you are explicitly giving that in email body or email script

try the approach shared by @Vegard S and see if that works

If my response helped please mark it correct and close the thread so that it benefits future readers.

Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader