Stuart Breckenridge

Custom Fonts in Email

I’m using custom email fonts through Cloud.Typography’s service. I found it easy to setup but noticed several drawbacks in early usage, which I’ve outlined below.

Note: For the purpose of this article, I'm using Mail on OS X El Capitan and I've assumed you have a Production project setup with email enabled at Cloud.Typography.

Setup

The first thing you need to do is create a new Stationery file. To do this, open Mail and create a new empty email message ⌘ + N, and then select File -> Save as Stationery.... In the save dialogue box, pick a name for your new Stationery file—I named mine Standard—and click Save.

After the Stationery template is saved, you need to locate it and edit the content.html file. Open a Finder window and use the Shift + ⌘ + G shortcut to open up a Go to folder... dialogue. In the window that opens, copy and paste this path and click Go:

~/Library/Containers/com.apple.mail/Data/Library/Application Support/Mail/Stationery/Apple/Contents/Resources/Custom/

In the resulting window that appears, open the Contents folder, then the Resources folder, option-click on the Standard.mailstationery file and select Show Package Contents. Again, open the Contents folder, followed by the Resources folder. In this folder you will see the content.html file, option-click it, select Open With, and then select a relevant program that can edit html files (I use Coda).

The html code should be edited so it looks something like this:

<html>
	<head>
		<!-- Add you cloud.typography css key here -->
		<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/12345/67890/css/fonts.css" />
	</head>
	<body dir="auto" style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;" class="">
		<!-- Add custom font styling in the span tag -->
		<span contenteditable="true" apple-content-name="body" style="display: block; font-family: 'Whitney SSm A', 'Whitney SSm B'; font-style: normal; font-weight: 400;" class="">		
		</span>
	</body>
</html>

Application

Once this is complete, save the content.html file. You can now navigate back to Mail and create a new mail message ⌘ + N and start typing. When you want to apply your custom font, select the stationery pane (top right of the compose window) and select the custom template (under Sentiments in the picker pane) and the typography will be updated.

Drawbacks

The drawbacks I’ve noticed are almost entirely on the part of the Mail app:

  • Custom Stationery—and therefore custom fonts—are not available in replies.
  • If you select Custom Stationery before typing your email, you can’t actually type any content into the email.
  • Custom fonts cannot be used to compose mail on mobile devices.

All in all, I’m not convinced on custom fonts in email. The entire solution seems sub-optimal.


— Supported by —