Search code examples
cssemailtemplatesfonts

How to add font-family style to Html Email Template

Hey I have an issue with adding Font Style to my confirmation Template which I send to my clients Email after the order is done. I know inline css works just fine with html email template but I'm trying to add Heebo font-family from google and I can load it in the head tag which won't work on gmail and hotmail.

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://fonts.googleapis.com/css?family=Heebo" rel="stylesheet"></head>

right now this is my head. but It won't work in gmail or hotmail as I said.

Solution

  • quick answer. You cant do it.

    gmail, hotmail, outlook, etc blocks external fonts for security reasons.

    its because of this that mails are normaly build with images and not 100% text.

    if you dont want to use images, you have to use safe fonts (fonts that exist in all operating systems).

    good luck