Web Safe Fonts

font-face

What is a web safe font?
These fonts are installed on just about every computer (95% or more) and will work across all browsers and major operating systems (Windows and Mac). While there is really is no “bulletproof” list of fonts, these are widely considered very safe to use:

Sans-Serif Fonts
Arial, Helvetica
Impact
Lucida Sans Unicode
Tahoma
Trebuchet MS
Verdana

Serif Fonts
Georgia
Times New Roman
Courier New, Courier

Why is choosing a web safe font important?
If the fonts you use on your website are not installed on your visitor’s computer, the font will substituted with different default font (not of your choosing) which can have disastrous results visually.

Web safe fonts can be a bit boring, so if you want to use custom fonts in your design, here are 2 nice ways to use non-web safe fonts and still ensure that your visitors will see them:

1. Google Webfonts. Your site links to Google webfonts as the “source” so no matter what fonts are installed on your visitor’s computer, the font hosted at Google is the one displayed.
2. Font Kits / @font-face. Similar to Google web fonts, this is a more advanced method of installing your own custom fonts and using @font-face css property.

These methods are not required for this class (unless you would like me to show you) but I just want to make you aware that they exist! Here is a tutorial on @font-face. Here is a font kit generator. And here are preset web font kits with code.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s