Gmail compatibility for templating

user_14744433 0
Viewed 36

I'm using a mail template that I'd like to use through gmail but I saw on CanIMail website that "import":

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

and "link":

<link href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">

aren't compatible, and that's a big problem because I have a bootstrap icon that won't show up to the mail receiver, and he won't be able to see the google fonts I need as well.

Is there any way to overcome this problem please?

import gmail fonts hyperlink templates
1 Answers

Unfortunately, Gmail doesn’t support @font-face for custom fonts either: https://www.caniemail.com/features/css-at-font-face/ Even if you inlined the CSS you are using with @import or the link tag, the fonts (and icon fonts) won’t be used.

If you have everything else working, one option would be to keep the fonts from Google Fonts, but set some fallback fonts for clients like Gmail that won’t use be able to use them. Ex:

font-family: Poppins, Avenir Next, Futura, Verdana, sans-serif;

Depending on what you’re trying to do, Bootstrap may not work as you expect either—there are some similar frameworks that are specifically written for compatibility with email clients, since some like Gmail still deviate so much from what browsers support today.

If you are only using a small number of icons, you will probably have better luck turning those specific icons into PNG images.

user_8647990
Related