. There are several web font hosting services. All computers come with pre-installed fonts that are considered to be “web safe.” Arial, Times New Roman, Georgia, Courier, and Verdana are often the default fonts for many devices and operating systems. Step 1: In WordPress, create a new post or page. These numbers highlight the fact that having creative and innovative emails is essential. The text using Google Fonts won’t display while loading, but it only shows a blank space. On your computer, open Gmail. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content. There are ways to get around this, though, such as ensuring that you preload fonts with a cross-origin attribute. You can manage your cookie preferences at any time. One of the significant concerns about using web fonts is whether or not they’re supported by different clients. 281 billion emails were sent and received. Web fonts add support for fonts that are not installed by default in a browser and are supported by all modern web browsers. Article first published in December 2012, updated April 2019. @import and @font-face. Therefore, it’s important to use a “fallback font” whenver you choose to use a custom font. When the font is used in your email, Outlook swaps the font with its default font: Times New Roman. Go to Google Fonts, find the font that you want to use and click on the “plus” sign as shown in the image below. If you inspect the stylesheet, you will notice one or more @font-face rules defining the font, as well as several links to download various formats of the font. This is because the use of web fonts in email is often seen as redistributing the font. For more tips on web fonts, see our handy guide. All you need to do is include a small code snippet and you are off to the races. The URL that you’ll need is inside the brackets. The service will package the font into a stylesheet that you can paste in the of your email. Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox. You can select the font for your email content in Klaviyo’s template builder, in the “Styles” section. Just have a glance at this article to know how to change fonts in Gmail. Statista highlights that over 281 billion emails were sent and received each day in 2018. Stick to the classics. This allows designers the creative freedom to design and use the type of fonts that best connect with their branding. Using custom fonts in your email can improve the overall look and feel, especially if it’s consistent with your website or the typography you use in your branding. Font Styles for Email . The various incarnations of the Gmail mobile apps. If you want to use a font that is not in Klaviyo’s default font list, then our first recommendation is using Google Fonts. So let’s do that. This is because most email clients strip out the head of HTML where the web font is specified, on send. The Outlook 2007/10/13/16 desktop clients. Drag and drop a Text Block at the very top of your email template. Add a Google Font to Your Template. All major email clients, such as Apple Mail, Microsoft Outlook (most versions), Lotus Notes, Thunderbird, Android, and iOS devices use Google fonts in emails. Just a Little @Import… I’ve chosen two fonts that I want to import from Google Fonts, Lobster & Droid Sans. Format your email. Most licenses for use of web fonts in email are based on the number of monthly opens. If you use a web font in your email, Outlook will ignore your fallback font and render your text using Times New Roman, a serif font, even though you might have specified sans serif fallbacks. What happens when you have recipients who don’t use these email clients? Using Google Web Fonts, use the search filters to find the font you need, using either the name of the font or the characteristics. If standard fonts work for your branding, you can simply use the handful of fonts that are considered “web safe fonts” which will be rendered properly in most of the email clients and devices. These web safe fonts are already available in Klaviyo. If you’re not sure how saved blocks work, you can find out more in our tutorial “How to Use Saved Blocks in Klaviyo”. Click “Save” on the top right corner of the Text Block settings and if everything was properly set, you should see the font change immediately. Step 2: Now type or paste your text into the Google Fonts block. If not, they will be among the choices available in the program. If the font isn’t installed in the computer or mobile device, there’s a good chance that the email won’t display. And for many web font services, this goes against their EULA (End User License Agreement). A great place to get started is Google Fonts. Email clients that do support custom fonts are Apple Mail, iOS Mail (the default email client for iOS devices), and the default email client for Android devices. After you finish creating your “font import” block, we strongly recommend to save the block so you can have a backup for yourself in case you accidentally delete it. You can create a text style that will be applied to all new emails you write. Keep in mind using web fonts will have a limited effect if viewing such emails while offline. When you find the font you want to use on Google Fonts service, follow these steps to implement the font in your email template. Click on the bar to expand the options. Campaign Monitor makes it easy to attract subscribers, send them beautiful email campaigns, and see stunning reports on the results. If you have been provided fonts to use for the email, you can host them on your own server and use the @font-face rule. In the wp-rocket blog post, all replies disagree with the author in the comment section. Reveal the mysteries of web fonts in emails. © 2016-2019 Retention Commerece. That number is only expected to rise in 2019 and beyond. This guide will cover how to add a Google Font to an email template, as well as how to add a self-hosted custom font to a template. In our example above, we’ve selected ubiquitous sans serif Arial font as a fallback. Create a link that will automatically apply a coupon code on Shopify Checkout. In this case: Outlook 2007/2010/2013/2016. This is Google hosted service that is free to use and contains nearly 1000 fonts for you to choose from. Some fonts are more web safe than others. When Outlook encounters the @font-face rule in your stylesheet, Outlook registers the font name but does not process the font itself. Please keep in mind that at this time, not all email clients support custom Google fonts. You can do this with the following snippet: