Web Design -- Font Relief

More Fonts for your web pages

You can never have enough fonts! --Anon

There are several ways to add "fancier" fonts to your web pages… other than the suggested Web Safe Fonts

1. Use a font you already have on/in your computer, and hope that the "client" visiting your web page also has that same font on/in their computer!
2. Another way is to use Public Domain Fonts that are "free" to use on your web page, and your clients can "freely" download them.  
3. Use Web Fonts that are in the Public Domain
4. Purchase Web Fonts from a font foundry.

 Fonts Common to ALL Computers

This is from the web site http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

See the web site for the notes attached to specific fonts

These fonts are common between the Mac and PC

Windows fonts / Mac fonts / Font family

Arial, Arial, Helvetica, sans-serif

Arial Black, Arial Black, Gadget, sans-serif

Comic Sans MS, Comic Sans MS5, cursive

Courier New, Courier New, monospace

Georgia1, Georgia, serif

Impact, Impact5, Charcoal6, sans-serif

Lucida Console, Monaco5, monospace

Lucida Sans Unicode, Lucida Grande, sans-serif

Palatino Linotype, Book Antiqua3, Palatino, serif

Tahoma, Geneva, sans-serif

Times New Roman, Times New Roman, Times, serif

Trebuchet MS1, Trebuchet MS, sans-serif

Verdana, Verdana, Geneva, sans-serif

Symbol, Symbol (Symbol2, Symbol2)

Webdings, Webdings (Webdings2, Webdings2)

Wingdings, Zapf Dingbats (Wingdings2, Zapf Dingbats2)

MS Sans Serif4, Geneva, sans-serif

MS Serif4, New York6, serif

What if your Client Doesn't have the font you selected for display?

Give them an alternative using a Font Stack!

EG… { font-family: Zapf Chancery, Brush Script MT, cursive;}

Which font do you see?

 

Font Stacks

With CSS you can use a "font" stack that lists first the font you want the web page to display, The font stack then lists several alternate fonts that have similar"font faces" matching YOUR main choice. It is always best to end the list using the default generic name for the font-family like serif, sans-serif, monospace, cursive and fantasy.

A Font stack, looks like this in CSS

h1, h2, h3, h4, h5, h6, p {font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }

h1, p {font-family: Tahoma, Verdana, Segoe, sans-serif;}

The above Font stacks were generated from the web site http://cssfontstack.com They did all the work for you… finding fonts with similar font faces and making the stacks. All you need to do is copy and paste and put a comment (in your source) in your web page giving then credit.

Your Web Editor may already have a list of Font stacks ready for use:

An Example from Dreamweaver: {font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; }

Note that if the font name has spaces in it you must enclose the entire font name in quotes e.g.:  "New Times Roman"

An Example From CoffeeCup's Font Wizard : {font-family: "Franklin Gothic Medium", "Franklin Gothic", Arial, sans-serif;}, but you get to build the stack yourself…

Font stacks are perfect candidates for "snippets" 

A really good guide or primer about font stacks can be found at http://coding.smashingmagazine.com/2009/09/22/complete-guide-to-css-font-stacks/

They have some really nice lists of font stacks with renderings of what the fonts look like

for example:

 

Here are some listed for body text:

• Baskerville, ‘Times New Roman’, Times, serif
• Garamond, ‘Hoefler Text’, ‘Times New Roman’, Times, serif
• Geneva, ‘Lucida Sans’, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif
• GillSans, Calibri, Trebuchet, sans-serif

 

This web page let's you select fonts, change their attributes,  and it will display them so you can compare and see what they look like… http://www.typetester.org If you are really into fonts you'll love the Typetester Generator.

For Example, this is the css I setup for Tahoma

CSS OF THE 3RD COLUMN’S SETTINGS

font-family: Tahoma;
background-color: #fff;
color: #444;
text-decoration: none;
word-spacing: normal;
text-align: left;
letter-spacing: 0;
line-height: 1.5em;
font-size: 1.6em;s you can see from the CSS you can fiddle with more than just a "Font Stack"

Public Domain Fonts

A good place to start is with Google's Font Directory

In 2010 when Google first started this project they only listed 23 fonts… They now list 501, oops now it's 626 font-families! Google provides you with the Markup that you'll need to snip and paste to embed the fonts into your web pages.  Google is also working with Type Kit to make some of their fonts available for your use.

You don't have to "download" the fonts… Instead  you paste a script (the embedded markup) that goes out and gets the font from Googles servers so that your client's browser can display 'em…  However, you can only see these fonts while on-line.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
       font-family: 'Tangerine', serif;        

font-size: 48px;

text-shadow: 4px 4px 4px #444;

      }

    </style>
  </head>
  

<body>
    <div>Making the Web Beautiful!</div>
  </body>
</html> 

add a text shadow and you get

See https://developers.google.com/fonts/docs/getting_started for more details

 

Professional Font Foundry's

TypeKit  offers a service that links you up with font foundries and the fonts of course...

TypeKit also offers "free" fonts for your use... You can use their Free service to try out their font service

You'll have to sign up for a free account, but the result may be "Font Relief!"

 

 

 

 

 

 

 

 

 

 

 

Have fun with fonts!

Got a question or comment? You Know 'holler~