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

Question

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.

Possible duplicate of [How to iterate the installed fonts using javascript?](http://stackoverflow.com/questions/3597682/how-to-iterate-the-installed-fonts-using-javascript) — Liam, Nov 14 '16 at 14:22
Liam it's not duplicate, you shouldn't use javascript in email clients and there are much longer posts on this site so pls. — Kaasstengel, Nov 14 '16 at 14:29
Thanks @Turnip that's pretty much what I need! But it has very little fonts to choose from. — Kaasstengel, Nov 14 '16 at 14:31
That's because there are very few fonts that are shared across OSs. If they aren't on the list - don't use them. — Turnip, Nov 14 '16 at 14:32

Nikhil Nanjappa · Accepted Answer · 2016-11-14T15:21:12.430

1

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

edited Nov 14 '16 at 15:21

answered Nov 14 '16 at 14:45

Nikhil Nanjappa

6,454
3
28
44

@font-face is stripped out of the code in sendgrid. Can I use local in font-family too? – Kaasstengel Nov 14 '16 at 14:57
@font-face is used to just define a font, without defining how can you use it. If not why even create a font-face, why not use say, `font-family: cursive;` directly on your body. This will work too. Whats stopping you from this ? – Nikhil Nanjappa Nov 14 '16 at 15:06
The font itself is really important because I have a design to follow along with. – Kaasstengel Nov 14 '16 at 15:13
If the sendgrid is stripping your styles then why not use them "inline" on your elements/body. `...` Inline styles will not be stripped :) – Nikhil Nanjappa Nov 14 '16 at 15:17
Mmm, yeah! :) The bottom 2 links were the answer to my question btw, thanks! – Kaasstengel Nov 14 '16 at 15:19
Cool, given some more links just in case, inliner - to convert all your embedded CSS to inline. You can accept so it can help others as well. Cheers – Nikhil Nanjappa Nov 14 '16 at 15:22

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

1 Answers1