Email Marketing Tool

vkerr
Participant

Custom fonts not displaying in Gmail or Yahoo, but are in Apple Mail

SOLVE

Hi there 😊

We are working on a rebrand for our company including our email templates. Leadership would like to see our corporate fonts integrated into our emails, Bookman and Metronic. I am struggling to get email clients to read the CSS we've written.

 

We have uploaded our fonts as .woff and .ttf files, referenced them in our style sheet, and call them in-line. We're using the @font-face method, @import method, and referencing an external stylesheet as well (though I've read that this will not help us? Not sure if that's accurate).

With great effort I have been able to successfully have our fonts display in Apple Mail for iOS, but no other platforms are working; Not Gmail nor Yahoo. I am at a loss for how to get these fonts to display in any other email client. Any suggestions/help would be greatly appreciated.

 

Below is the Design Manager and the CSS in the <head> area:

Screen Shot 2020-09-04 at 3.36.09 PM.png

Screen Shot 2020-09-04 at 3.36.17 PM.png

 

Here is the Email Editor with the styles in-line:
Screen Shot 2020-09-04 at 3.39.32 PM.png

 

Here is the email in Apple Mail on iOS. Fonts are in BookmanOldStyle and MetronicSlabNarrowLight which is what we want.

Preview - 2021 Brand Review Email - Design Manager.jpg

 

Here is the email in Gmail on iOS (please disregard dark mode). Shows Georgia and Helvetica (I think?).

Screenshot 2020-09-04 at 3.49.36 PM.jpg

Thank you!

0 Upvotes
2 Accepted solutions
sharonlicari
Solution
Community Manager
Community Manager

Custom fonts not displaying in Gmail or Yahoo, but are in Apple Mail

SOLVE

Hey @vkerr 

 

Thank you for the information provided, based on this article from our KB, adding custom fonts using @font-face and @import are only supported in Apple Mail and a few other email clients.

Please note: while Google Fonts are available in custom module font fields, Google Fonts cannot be used for email. This is because custom fonts are widely unsupported in email clients. Instead, only the default system fonts will be available in your custom module.

 

I hope this helps

Thanks

Sharon


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




View solution in original post

tjoyce
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Custom fonts not displaying in Gmail or Yahoo, but are in Apple Mail

SOLVE

Unfortunately, there isn't a real way to work around gmail and yahoo, they just aren't supporting custom fonts at all.

 

https://www.litmus.com/blog/typography-tips-for-email-designers/

View solution in original post

8 Replies 8
SoporteAM
Member

Custom fonts not displaying in Gmail or Yahoo, but are in Apple Mail

SOLVE

Hi, I am Cristina Morera.

I need to import some fonts that we use in our webpage to landing pages and emails. Support team said that for custom fonts I would need to copy the fonts import code, paste it into the pages stylesheet, then apply the font with CSS rules.  I have never tried anything with CSS, could you help me try this out? 

0 Upvotes
JessicaH
HubSpot Alumni
HubSpot Alumni

Custom fonts not displaying in Gmail or Yahoo, but are in Apple Mail

SOLVE

Hi @vkerr,

 

Thanks for reaching out.

I want to tag in some thought leaders to see if they can assist with this.

Hi @prosa @tjoyce @SandyG1, would you be able to share your thoughts with @vkerr?

 

Thanks!

Jess   


Wusstest du, dass es auch eine DACH-Community gibt?
Nimm an regionalen Unterhaltungen teil, in dem du deine Spracheinstellungen änderst !


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


tjoyce
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Custom fonts not displaying in Gmail or Yahoo, but are in Apple Mail

SOLVE

Unfortunately, there isn't a real way to work around gmail and yahoo, they just aren't supporting custom fonts at all.

 

https://www.litmus.com/blog/typography-tips-for-email-designers/

vkerr
Participant

Custom fonts not displaying in Gmail or Yahoo, but are in Apple Mail

SOLVE

Thanks tjoyce -- Side question based on the article you referenced; We added a link to our style sheet at the top of the first screenshot. Do you know if our syntax is correct for optimal compatiblity?

 

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Custom fonts not displaying in Gmail or Yahoo, but are in Apple Mail

SOLVE

@vkerr - The font family declarations look right to me. 

I'm not sure the @import statements are doing anything since they reference font files and not CSS files. 

I think you can safely remove those.

vkerr
Participant

Custom fonts not displaying in Gmail or Yahoo, but are in Apple Mail

SOLVE

Thanks for looping in other folks Jess 🙂

0 Upvotes
sharonlicari
Solution
Community Manager
Community Manager

Custom fonts not displaying in Gmail or Yahoo, but are in Apple Mail

SOLVE

Hey @vkerr 

 

Thank you for the information provided, based on this article from our KB, adding custom fonts using @font-face and @import are only supported in Apple Mail and a few other email clients.

Please note: while Google Fonts are available in custom module font fields, Google Fonts cannot be used for email. This is because custom fonts are widely unsupported in email clients. Instead, only the default system fonts will be available in your custom module.

 

I hope this helps

Thanks

Sharon


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




vkerr
Participant

Custom fonts not displaying in Gmail or Yahoo, but are in Apple Mail

SOLVE

Thanks Sharon -- Is there any way to get custom fonts to display in Outlook, Gmail, Yahoo, etc. that you've seen?

0 Upvotes