Title explains the issue, but I can't get a Google Font to show up in Gmail for an HTMl email template that I created. I've tried to figure out how to do so (inline CSS, #import, #font-face, etc.) but it still won't show up.
Is there currently a way to get Google Fonts to show up in Gmail if you're using an HTML email template? I know there must be, but I'm really stuck here and would appreciate any help! Here's my current code:
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lobster"/>
<style type="text/css"> h1 { position: relative; font-family: 'Lobster', sans-serif; font-size:330%; } </style>
<h1 style="position: relative; text-align: center; font-family: 'Lobster'; padding: 1%;">Heading</h1>
Thank you!
Gmail (like most webmail) strips header styles, and there's no way to inline custom font declarations. Email has so many more constraints than the web because of the many and different ways the HTML is consumed and altered by clients.
You'll need to inline your CSS and use font stacks that fall back to acceptable system fonts, and if you absolutely require a font for a certain look, do what's taboo on the web: use images, but keep them small. The alt text will ensure that your plain text version is readable, too.
I work with a system that can use an email template to make and send an email, and I face a problem while trying to attach local font (any type) to email.
I attach a font with #font-face in in this way (prerendered HTML):
<style>
#font-face {
font-family: "Pacifico";
src: url("../resources/Pacifico.ttf");
}
body, span, div, input[type=text], label {
font-family: 'Pacifico' !important;
color:red;
}
</style>
After rendering, ready to send HTML page contains an appropriate link to the font (I can download font successfully as a font (content type is correct) from Tomcat server localhost:8080/.../font) and it is uploaded properly. However, the page doesn't implement it and the font itself isn't represented as it should (seems like default font is used).
This problem relates exclusively to locally stored fonts - if I use any CDN email is rendered properly.
The font is 100% workable since when I create a dummy HTML page and attach font (with a direct link to a folder) there it is applied correctly.
Edit
May this issue to connected to the inequality of content types for fonts in Tomcat and my application (application/x-font-ttf in Tomcat for .ttf fonts VS font/ttf in application)?
Edit 2
Rendered HTML contains this snippet
<style>
#font-face {
font-family: "Pacifico";
src: url("http://localhost:8080/path/to/resource/Pacifico.ttf");
}
body, span, div, input[type=text], label {
font-family: 'Pacifico' !important;
color:red;
}
</style>
The relative URL will be relative to the location of the CSS.
Which appears to be inline in the email, which does not have a URL. So a relative URL has nothing to be relative to.
I assume when using a CDN you'll have an absolute URL: you'll need one for each non-embedded resources,
My website uses a font that Google Fonts does not have, so I used "#font-face". which looked like this.
#font-face {
font-family: 'Font';
src: local(example.ttc);
}
This method worked and my font that I uploaded was displayed. The only problem is that the font I'm using has 2 styles (inline and solid) and I don't know how to specify it (there is only one .ttc file for both styles). I tried font-style: solid and font-family: 'Font Solid'; and many other ways but none of them worked. Does anybody know how to specify only one style? Thanks!
PS- I replaced "Font" and "example.ttc" with their actual names in my real code.
PPS- Sorry if my question is vague or too specific. Just tell me and I'll clear it up.
I have the following in my css and the font won't change to what I want it to become.
body{
background-color:#a8a7a7;
color:#C50909;
font-family: main, Calibri;
text-align:center;
}
#font-face{
font-family: main;
src: url('fonts/RegencieLight.ttf');
}
and my css properly links into my html because all of the other css aspects will still be applied. If anyone could help me that would be great. Thanks.
You must provide a string as the font-family name like this
font-family: "main";
so that you can reference it in other places like this
font-family: "main", Calibri
Check out: https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
Either
the path is wrong or
depending on the browser and operating system it could not like the font format
Either way I recommend reading Paul Irish's bullet proof #font-face syntax and using Font Squirrel's #font-face generator/packager The packager will take a font and create each format that a web client might need so it will work on all systems.
I want to use a single font named "Algerian" across my whole website. So, I need to change all HTML tags and I don't want to write different code for different tags like:
button{font-family:Algerian;}
div{font-family:Algerian;}
The method written below is also highly discouraged:
div,button,span,strong{font-family:Algerian;}
Put the font-family declaration into a body selector:
body {
font-family: Algerian;
}
All the elements on your page will inherit this font-family then (unless, of course you override it later).
*{font-family:Algerian;}
better solution below
Applying a single font to an entire website with CSS
The universal selector * refers to all elements,
this css will do it for you:
*{
font-family:Algerian;
}
But unfortunately if you are using FontAwesome icons, or any Icons that require their own font family, this will simply destroy the icons and they will not show the required view.
To avoid this you can use the :not selector, a sample of fontawesome icon is <i class="fa fa-bluetooth"></i>, so simply you can use:
*:not(i){
font-family:Algerian;
}
this will apply this family to all elements in the document except the elements with the tag name <i>, you can also do it for classes:
*:not(.fa){
font-family:Algerian;
}
this will apply this family to all elements in the document except the elements with the class "fa" which refers to fontawesome default class,
you can also target more than one class like this:
*:not(i):not(.fa):not(.YourClassName){
font-family:Algerian;
}
* { font-family: Algerian; }
The universal selector * refers to any element.
Ensure that mobile devices won't change the font with their default font by using important along with the universal selector * :
* { font-family: Algerian !important;}
As a different font is likely to be already defined by the browser for form elements, here are 2 ways to use this font everywhere:
body, input, textarea {
font-family: Algerian;
}
body {
font-family: Algerian !important;
}
There'll still have a monospace font on elements like pre/code, kbd, etc but, in case you use these elements, you'd better use a monospace font there.
Important note: if very few people has this font installed on their OS, then the second font in the list will be used. Here you defined no second font so the default serif font will be used, and it'll be Times, Times New Roman except maybe on Linux.
Two options there: use #font-face if your font is free of use as a downloadable font or add fallback(s): a second, a third, etc and finally a default family (sans-serif, cursive (*), monospace or serif). The first of the list that exists on the OS of the user will be used.
(*) default cursive on Windows is Comic Sans. Except if you want to troll Windows users, don't do that :) This font is terrible except for your children birthdays where it's welcome.
Please place this in the head of your Page(s) if the "body" needs the use of 1 and the same font:
<style type="text/css">
body {font-family:FONT-NAME ;
}
</style>
Everything between the tags <body> and </body>will have the same font
Ok so I was having this issue where I tried several different options.
The font i'm using is Ubuntu-LI , I created a font folder in my working directory. under the folder fonts
I was able to apply it... eventually here is my working code
I wanted this to apply to my entire website so I put it at the top of the css doc. above all of the Div tags (not that it matters, just know that any individual fonts you assign post your script will take precedence)
#font-face{
font-family: "Ubuntu-LI";
src: url("/fonts/Ubuntu/(Ubuntu-LI.ttf"),
url("../fonts/Ubuntu/Ubuntu-LI.ttf");
}
*{
font-family:"Ubuntu-LI";
}
If i then wanted all of my H1 tags to be something else lets say sans sarif I would do something like
h1{
font-family: Sans-sarif;
}
From which case only my H1 tags would be the sans-sarif font and the rest of my page would be the Ubuntu-LI font
in Bootstrap,
web inspector says the Headings are set to 'inherit'
all i needed to set my page to the new font was
div, p {font-family: Algerian}
that's in .scss
*{font-family:Algerian;}
this html worked for me. Added to canvas settings in wordpress.
Looks cool - thanks !