Fonts in Email

I read this article on typography.com - FONTS IN EMAIL

Really keen to do this but when I follow the steps and upload the edited template the font doesn't work. It actually changes the font in the CSS and changes this...

<link rel="stylesheet" type="text/css" href="//cloud.typography.com/1234/5678/css/fonts.css" />

To base 64 font. All of which doesn't work?

Any ideas?

eboon, 5 months ago

I've just come across exactly the same problem. Google Fonts works fine (the link to the css file in the head remains unchanged), but using Hoefler & Co's Cloud.typography system (http://www.typography.com/cloud/welcome) causes the content of the linked css file to be added to the head of the template, and doesn't work at all.

Anyone else had this problem, or have any idea as to how to fix it?

Thanks.

ox4dboy, 5 months ago

There are a few ways to get your fonts in, try both of these and see if it makes a difference:

<style type="text/css">

@media screen {
   /* the first way */
   @import url(https://fonts.googleapis.com/css?family=Fira+Sans);

   td.price1 span {
   font-family: "Fira Sans";
   font-size: 14px;
   }
 
/* the second way */
@font-face {
font-family: 'BenchNine';
src: local('BenchNine Regular'), local('BenchNine-Regular'),
url(https://themes.googleusercontent.com/static/fonts/benchnine/v2/xmB9oJNpSFKa3qTF2JABPrO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
td.price2 span {
   font-family: "BenchNine";
   font-size: 14px;
   }

}
</style>

I've had to mix and match how I get fonts into my emails with different font providers.


I create user experiences that save time, feel good & make money. Agile UX & Web/App Designer, Logo Designer, Speaker & Marketer.

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

Get started for free
1-888-533-8098