CODEWITHSUNDEEP
htmlcssemailgmailwebfonts
michaelvhester
michaelvhester

Reputation: 61

Can't get Google Font to show up for HTML email in Gmail

Title explains the issue, but I can't get a Google Font to show up in Gmail for an HTMl email template that I created. I've tried to figure out how to do so (inline CSS, @import, @font-face, etc.) but it still won't show up.

Is there currently a way to get Google Fonts to show up in Gmail if you're using an HTML email template? I know there must be, but I'm really stuck here and would appreciate any help! Here's my current code: 

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lobster"/>

<style type="text/css"> h1 { position: relative; font-family: 'Lobster', sans-serif; font-size:330%; } </style>

<h1 style="position: relative; text-align: center; font-family: 'Lobster'; padding: 1%;">Heading</h1>

Thank you!

Upvotes: 3

Views: 10623

Answers (1)

denmch
denmch

Reputation: 1516

Gmail (like most webmail) strips header styles, and there's no way to inline custom font declarations. Email has so many more constraints than the web because of the many and different ways the HTML is consumed and altered by clients.

You'll need to inline your CSS and use font stacks that fall back to acceptable system fonts, and if you absolutely require a font for a certain look, do what's taboo on the web: use images, but keep them small. The alt text will ensure that your plain text version is readable, too.

Upvotes: 6

Related Questions