Introduction
Increasingly, clients are using custom fonts in emails, websites and print. Since we have received several unique requests for flexible requirements with custom fonts we thought it would be useful to publish an article explaining the process.
What you need to know about using fonts in Email, Websites and Print
Email
Email clients can only display fonts that are installed on the recipient’s computer when they send emails. Each computer has a default list of fonts and you can see this by looking in the Your Fonts folder or by viewing the font list in Microsoft Word.
Because you have a font installed on your computer does not mean that everyone else does, and this can cause confusion. To add even more complexity, Apple and Windows have different sets of default fonts installed.
This is a full list of web safe fonts:
- Arial, Helvetica, sans-serif
- 'Arial Black', Gadget, sans-serif
- 'Bookman Old Style', serif
- 'Comic Sans MS', cursive
- Courier, monospace
- 'Courier New’, Courier, monospace
- Garamond, serif
- Georgia, serif
- Impact, Charcoal, sans-serif
- 'Lucida Console', Monaco, monospace
- 'Lucida Sans Unicode', 'Lucida Grande', sans-serif
- 'MS Sans Serif’, Geneva, sans-serif;
- 'MS Serif’, ‘New York’, sans-serif;
- 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
- Symbol, sans-serif
- Tahoma, Geneva, sans-serif
- 'Times New Roman', Times, serif
- 'Trebuchet MS', Helvetica, sans-serif
- Verdana, Geneva, sans-serif
- Webdings, sans-serif
- Wingdings, 'Zapf Dingbats', sans-serif
So in order to create emails which reproduce accurately on a recipient's computer what we see on our computer, we should only use web safe fonts from the list above (for Windows and Mac).
My client is based in Asia and is unable see or use special characters. Can you advise?
UTF-8 or Unicode UTF 8 is encoding, used in the browser for representing Unicode. Unicode is, in effect, a list of all characters, punctuation, spaces etc. which a user might need to make up a piece of text containing special characters.
Of course, you would need to communicate with your client to discover what web safe fonts they would like to use and this will depend on the country they reside in.
If your client’s language uses special characters, which usually means Chinese, Japanese and Korean, we would need to look further into the list of fonts that they will need within their Email module. Fortunately, Unicode fonts in Asia are supported so we just need to list them clearly in our css, as in the following:
- font-family: "MS Mincho","ＭＳ Ｐゴシック","MS PGothic","メイリオ", Meiryo, Georgia, "Times New Roman", sans-serif,;
- font-family "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", Georgia, "Times New Roman", sans-serif;
In the examples above, we are using English fonts at the end which will serve as a fallback if the first set on the list are not found.
The above can be used when you have identified that the web safe Unicode UTF 8 font will be needed and the list above will get you started. You would also confirm this with your client and once you have this information, provide that to the Front-End Developer who will include this in the Email build.
Okay, but some devices can show custom fonts in Email?
Yes, this is true, but at the time of writing the list of Email clients that can show custom fonts is small and you would need to express to your client that web safe fonts are the way to go to start with.
However, the landscape of Email clients is changing and the market share of Email clients that can show custom fonts is shown below:
- Apple Mail
- iPhone
- iPad
- Android Mail (native app, not Gmail)
- Thunderbird
IF your client deems that Apple / iPhone and iPad is a good enough indicator to use custom fonts then we can of course go ahead and include them in our stylesheets and host them on the server. If so, the Front-End Developer will list the web safe fonts alongside custom fonts as a fallback.
Note: if you are using custom fonts please ensure that they are collected from the client and not sourced by yourself. This will avoid licensing issues.
Okay, so is this the same for Websites and Print?
Yes. In that we can upload custom fonts to our servers which are shown in the browser. Essentially, custom fonts for the web allow us to have more control. This is because fonts are viewed on the browser and do not require you to have that font stored on your computer.
Fonts within Web and Print Material are a little more complex. Your Account Manager can best advise you on the process for using fonts in this case.
