How do fonts work

With the web licenses, there may be a choice to host the font yourself or to have the font hosted by the provider. In some web licenses, you pay for a certain amount of page views with each email that loads the font counting as a page view, so make sure you take that into consideration when you are purchasing a license.

Your web font service should have this URL. Find out how in the next step for the font-face embed method. There are three methods for embedding web fonts in email and a caveat that may limit which method you can use. The three methods to embedding your font are:. This can lead to your web font taking a little longer to appear in your email, while the rest of the email is loaded. You can make beautiful code that works in Litmus all day long, but if your ESP changes your code, as we know most of them do, then nothing you do will matter.

The import method is also a relatively simple method. Online web font services commonly offer five file formats to choose from:. First, you have to find the font you would like to use on Google Font. Then, choose the style you want to use. A flyout menu will appear on the right.

Both of these will have a URL highlighted in the screenshot above. At Litmus, the font-face method is our go-to implementation of importing web fonts into our emails. All credit for this method of importing web fonts goes to email accessibility advocate Paul Airy , as detailed in a past Type: E newsletter. Each email client has a default font if the font listed in the font-family stack is unavailable. Fallback fonts should be the same type as the web font—use a sans-serif fallback font if your web font is a sans-serif font, and a serif fallback font if your web font is also a serif font.

The x-height is the vertical height of the font. Ideally, you should choose a fallback font that has a similar x-height to prevent your email design from falling apart when the fallback font is in use. Once your web font is imported and your fallbacks chosen, using them in email is as easy as using a web safe font. Just use the font-family name defined in the import method followed by your fallback font s in either the CSS inline or in the head:.

Think of this as a prioritized list of preferred fonts. So the font rendered will be Verdana. Like web design, you can pull in the genuine fonts by including these styles in your font-face stack, like so:. As you can see, the different styles pull in different fonts regardless of the font-family. This way, if you style your font in the HTML like this:. So, you might be wondering—why do it this way instead of declaring a different font-family for each style, which also pulls in the genuine fonts?

This is how that looks:. This presents a problem. Using font-family names to store styles not only creates overly-complicated and redundant CSS , but it also strips your text of styling if your fallbacks kick in.

By keeping your font-family and your font-weights or font-styles separate, your fallback fonts will still retain the correct styling. Every email client has its quirks. Fortunately, you can see them in your emails before you hit send—with Litmus Email Previews.

No more broken emails. The simplest fix for this is to use the font-face method. But wait a minute. I just said everything before Outlook So what happens in Outlook and Outlook Office ?

Well, in those email clients, Outlook falls back to your fallback even without the MSO conditionals. In fact, in those clients, the import appears to actually work! Then you need to call the font in your CSS. With most services, you simply write in the font family name. The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began over a decade ago.

Creative Bloq Staff. This is quite easy to do in InDesign. See " Sending the Correct Fonts to your Printer " below. TrueType fonts were designed to eliminate the need for multiple files.

They incorporate all three files from the PostScript fonts into one file. When packaging your file , you will not see two files for each font as you will when you use PostScript fonts.

OpenType was built on TrueType and also contains, in one file, all the information necessary to render fonts correctly both on screen and in print.

It's main benefit is that it is cross-platform. The same file will work on both a Windows and Macintosh system. OpenType fonts with the. For more information on OpenType fonts visit the Adobe Fonts website. In the above example, six fonts are used. These are the same fonts used in the other examples given on this webpage. A third way to tell is by using font management software, such as Suitcase Fusion.