How do I use self-hosted webfonts in emails?
February 12, 2015 10:33 AM Subscribe
I'd like to use a custom font in the emails I send out. I have a particular font in mind and own the webfont files for that typeface. The font is not available on Google Webfonts.
Based on some quick research, it looks like I can host the webfont myself and use an @import code in the html head of my email template to achieve this. I have an Office 365 Business subscription, which includes a public Sharepoint site I can use to host the font files.
Would the above work? If not, what's the best way for me to use my font in my emails? If the above does work, how exactly do I perform these steps? Is there a tutorial somewhere on the internet, or can someone explain step by step? I'm pretty much clueless about HTML but am willing to spend time learning.
Based on some quick research, it looks like I can host the webfont myself and use an @import code in the html head of my email template to achieve this. I have an Office 365 Business subscription, which includes a public Sharepoint site I can use to host the font files.
Would the above work? If not, what's the best way for me to use my font in my emails? If the above does work, how exactly do I perform these steps? Is there a tutorial somewhere on the internet, or can someone explain step by step? I'm pretty much clueless about HTML but am willing to spend time learning.
Sub-optimal solution, but have you considered posting the stuff that requires your font as pre-generated images?
posted by jozxyqk at 10:54 AM on February 12, 2015
posted by jozxyqk at 10:54 AM on February 12, 2015
Do you really have to do this?
If you've found a font that's better for reading and comprehension than the fonts that people choose for themselves, and/or the defaults in their e-mail programs, then just send them a link and they can use it for all their e-mail messages. Otherwise, please let people read your words and don't burden them and the net with additional fonts.
posted by amtho at 10:57 AM on February 12, 2015 [3 favorites]
If you've found a font that's better for reading and comprehension than the fonts that people choose for themselves, and/or the defaults in their e-mail programs, then just send them a link and they can use it for all their e-mail messages. Otherwise, please let people read your words and don't burden them and the net with additional fonts.
posted by amtho at 10:57 AM on February 12, 2015 [3 favorites]
Your best approach for this is to create a PDF and send it out.
posted by Chocolate Pickle at 10:58 AM on February 12, 2015 [5 favorites]
posted by Chocolate Pickle at 10:58 AM on February 12, 2015 [5 favorites]
Bear in mind that you may well be causing accessibility issues for people who have their default fonts set to account for visual processing problems.
posted by feckless fecal fear mongering at 11:25 AM on February 12, 2015 [2 favorites]
posted by feckless fecal fear mongering at 11:25 AM on February 12, 2015 [2 favorites]
From a UX perspective, I'd urge you to steer clear of this approach.
Remember that your audience will be reading your emails on a variety of platforms, from mobile to desktop, on a number of applications both native and web-based. The most important directive for any email, particularly mass-delivered email, is clarity, readability. If there is a delay (caused possibly by your self-hosting) while your custom font is rendering the message you wish to deliver, you are going to lose your audience. They will move on to the next email, the next distraction, the next thing they have to do.
posted by grabbingsand at 12:25 PM on February 12, 2015 [2 favorites]
Remember that your audience will be reading your emails on a variety of platforms, from mobile to desktop, on a number of applications both native and web-based. The most important directive for any email, particularly mass-delivered email, is clarity, readability. If there is a delay (caused possibly by your self-hosting) while your custom font is rendering the message you wish to deliver, you are going to lose your audience. They will move on to the next email, the next distraction, the next thing they have to do.
posted by grabbingsand at 12:25 PM on February 12, 2015 [2 favorites]
I'm afraid email HTML and CSS standards are about 10 years behind the rest of the internet. And weirder. And don't even get me started on Lotus Notes.
You can attempt your self-hosted webfont @import solution. It will work on a few clients and web services, but not many. If you have any analytics of your campaign group, you can see if this is even worth attempting.
You need to set sensible fall backs. If the font is a header, consider making it an image. However, many clients will not display images by default, so you need the message to be clear without the header image.
If the font would be for body, you need to leave it as live text. Consider people who use screen readers, people who are getting email on smart phones, or smart watches, or smart toasters.
I am a front-end developer, working in HTML day in and day out, and I would generally not attempt to code an email template from scratch. MailChimp has awesome, rigorously tested templates for free. When the odd occasion to design an email arises, I use these.
http://templates.mailchimp.com/design/typography/
posted by fontophilic at 12:54 PM on February 12, 2015 [4 favorites]
You can attempt your self-hosted webfont @import solution. It will work on a few clients and web services, but not many. If you have any analytics of your campaign group, you can see if this is even worth attempting.
You need to set sensible fall backs. If the font is a header, consider making it an image. However, many clients will not display images by default, so you need the message to be clear without the header image.
If the font would be for body, you need to leave it as live text. Consider people who use screen readers, people who are getting email on smart phones, or smart watches, or smart toasters.
I am a front-end developer, working in HTML day in and day out, and I would generally not attempt to code an email template from scratch. MailChimp has awesome, rigorously tested templates for free. When the odd occasion to design an email arises, I use these.
http://templates.mailchimp.com/design/typography/
posted by fontophilic at 12:54 PM on February 12, 2015 [4 favorites]
+1 to all of the above. Don't try to do this in anything other than a header/banner that you can turn into an image. You have to contend with email clients, browsers, and operating systems on both mobile and desktop -- you're looking at QAing like ~50 variants just to hit the most common ones. A paid service like Email on Acid will do it for you, but all of that just means you'll know it's broken -- getting it working is a whole other ballgame, if it's even possible. This shit is not easy. I write, code, and send emails for a living, with a team of actual web developers at my disposal, and my firm wouldn't attempt something like this.
I assume you're using an email marketing service provider (e.g. Mailchimp)?
posted by Ragini at 6:03 PM on February 12, 2015
I assume you're using an email marketing service provider (e.g. Mailchimp)?
posted by Ragini at 6:03 PM on February 12, 2015
If you decide to host files, keep in mind that SharePoint Online Public Websites are going away.
posted by djb at 9:25 PM on February 12, 2015
posted by djb at 9:25 PM on February 12, 2015
This thread is closed to new comments.
posted by derbs at 10:41 AM on February 12, 2015