Shopify Email Fonts

[wornnyc]

Hi all, 

Is there an easy way to incorporate custom fonts into Shopify Plus emails? My client is using fonts Archer and Halis and would like their emails to match their website. 

Thanks so much! 

[StevoHoodDesign]

I wouldn't say it's "Easy" but if you are familiar with using style sheets, you can use google fonts to load a font into an email and style it. All your styles have to be generated inline in an email, so if the font isn't hosted, it won't work. Also most email application use fallback fonts, so you should design your email to look good with the hosted font as well as a WebSafe font. Fonts.com is another good one for emails but it, of course, comes at a premium ($10 a month) but with a lot more selection.

Here's an example of what the top of the email would look like in HTML:

<style type="text/css">
@media screen {
  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
  }

  ...

  body {
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
  }
</style>

Again, tread lightly, this doesn't work in every mail client.