Arnold Arnold - 22 days ago 8
HTML Question

How to find suitable fonts that are installed on a user's machine?

I am making an email template and I'm trying to find the right fonts for it.

My problem is that I cannot use @font-face AT ALL (it's stripped out using sendgrid). and thus I need the fonts to be installed on the machine of the user and accessible by font-family without using @font-face.

How would I find suitable fonts to use? Also; I cant use Javascript because some email clients don't allow that.

Answer

If you want to see "how many machines have them installed." - this is simply impossible & not even the right approach.

The right approach(Safe web fonts) would be to use @font-face fetching fonts from users local machine(Windows/MAC pre-installed) using the local() to fetch from the users pre-installed fonts.

font-face {
    font-family: 'myFont';
    src: local('Verdana');
    src: local('Arial');
    src: local(sans-serif);
    //result would be - font-family: 'Verdana', 'Arial', sans-serif;
}

The location in any Windows users machine from where the fonts are being pulled is:

C:\Windows\Fonts

The location in any MAC users machine from where the fonts are being pulled is:

/Library/Fonts/

You could see all other pre-installed fonts here as well.

You can check from these, all the common fonts that are pre-installed on Windows & MAC

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

http://web.mit.edu/jmorzins/www/fonts.html

UPDATED

If sendgrid is stripping all your embedded styles then use inline styles instead on your elements/body.

<body style="font-family: 'myFont'; src: local('Verdana');">...</body>

There are also some good inliner out there that will convert your embedded CSS to inline CSS.

Zurb email inliner - http://foundation.zurb.com/emails/inliner.html