Google Web Fonts not displaying on iOs (Safari browser & MailApp)

Hi, I'm triying to display Google Web fonts in an email using @import and then referring to this font. I'm also working on a mobile version but the process is the same.

The main problem I have at the moment is that the google web fonts are not displaying in Safari checking the "html file" with an iPhone and neither when sending the mail to Mailapp for iPhone.

I tested the template several times. Same issue everytime. The fallback font is displayed.

The only way I had to display this Open Sans font in the browser was adding a Google Loader Api code with javascript, but was not working in email via mailapp. And also is not good to use javascript in emails for spam related reasons.

The fonts are displayed without problems in gmail and website too (checked with a Mac).

Any tips or solution?

The code I use is this one:

<style type="text/css">

@import url(,400italic,600italic,700italic,800italic,400,800,700,600,300');



<table bgcolor="#262626" class="canvas" width="100%" style="border-collapse:collapse;border-spacing:0;min-width:600px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;">
<h1 style="margin-top:0;font-family:'Open Sans', HelveticaNeue, sans-serif !important;font-weight:300;letter-spacing:0px;text-align:center;font-size:40px;line-height:36px;margin-bottom:35px;display:block;transition:all .25s;text-decoration:none;color:#181818">TEXT!</h1>

I've tried without the !important and is not working too.

Any help to solve this?


ob79, 2 years ago

It seems to be a problem of "Open Sans" web font. Trying with other fonts of Google Web Fonts everything works fine.

Any news about this issue?


canhsat, 2 years ago

Useful knowledge, thank you for sharing

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free