Common Fonts:
Fonts that we can expect to be on most computers so they display correctly are called web-safe fonts. There are a handful of web-safe fonts. If you stick with these fonts, you can expect them to load correctly in the browser, because most computers have them installed.They are Times New Roman, Georgia, Courier, Trebuchet MS, Arial, Comic Sans, Verdana, and Impact.

These font families change with every operating system upgrade. To keep up with those changes refer to this online resource for a list of compatibility.

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

Downloadable Fonts:
Fonts can be downloaded to your hard drive and then uploaded to your server so that the html file reads in the typographic display rules and displays the font correctly int he browser.

We make the call to those server fonts using the “@font-face directive “. A CSS command that downloads a font to the browser and used it while you are visiting a site.

A recommended resource for finding these fonts is a site called font squirrel.

www.fontsquirrel.com

If you do a google search you will find many sites that can lead you to web fonts. The big thing to watch for is that they are not all free. Font Squirrel does a really good, honest and transparent job at representing as many web fonts as possible and giving you easy search buttons to find which ones are for which display, what are free, what are licensed.

For this you must understand the different types of font file formats.

  • EOT: ​embedded Open Type works only in IE.
  • True Type and Open Type: t​he font format most commonly used for computer fonts.
  • WOFF: W​eb open font format is a newer font format which tends to be smaller primarily used on mobile devices.
  • WOFF 2: c​laims 30% gain over WOFF.
  • SVG: s​calable vector format

Using Font Squirrel you can download the fonts (free or paid) and also convert the file formats for use in every display (search for OTF fonts – web fonts). In the main navigation at FontSquirrel.com you will find a button called Font Generator. Here you can upload a font on your hard drive, check a box that you have the real license for it and then generate a version of the font for each of the platforms.

Implementing @font-face
To program type using the @ Font-face call you

  1. In your html header, link to an external style sheet
  2. In your style sheet, copy the URLs (remember to change the root directories to match your server configuration)
  3. Call the font either using a class or a tag

HTML header example

<head>

<title>Web-Typography_02</title> <meta http-equiv=”content-type”content=”text/html;charset=utf-8″ />

<link href=”Type_exec_02_complete.css” rel=”stylesheet” type=”text/css” />

</head>

CSS font-face declaration example

/* ——- Import fonts downloaded from Font Squirrel ——- */

@font-face {

font-family: ‘cinzelregular’;

src: url(‘fonts/Cinzel-Regular-webfont.eot’);

src: url(‘fonts/Cinzel-Regular-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘fonts/Cinzel-Regular-webfont.woff’) format(‘woff’), url(‘fonts/Cinzel-Regular-webfont.ttf’) format(‘truetype’), url(‘fonts/Cinzel-Regular-webfont.svg#cinzelregular’) format(‘svg’);

font-weight: normal;

font-style: normal;

}

Font-tag/class example

h1{

font-family: ‘cinzelregular’; font-size: 45px; line-height: 120px; font-weight: normal; text-align: center; letter-spacing: 5px; }

.fancyblack{

font-family: ‘cinzel_decorativeblack’; font-size: 40px;

font-weight: lighter;

font-style: italic;

line-height: 45px;

text-transform: none;

}

Font Server
There are a few hosting options for web font servers but the most popular one is the Google Fonts h​ttps://www.google.com/fonts

Google fonts is free – amazing but true. There are over 700 fonts available and the google library keeps getting larger.

Using a google font is easy, search for the font you want, add it to your collection, select which weights you want (not download size change tremendously, use the tools to manage download time).

Then add them to your code:

  1. In the html file add the code they provide into the header

<head>

<link href=’http://fonts.googleapis.com/css?family=Open+Sans’ rel=’stylesheet’ type=’text/css’>

</head>

Then in your font call (hopefully in a the .css file) to a tag or a class

h1 {

font-family: ‘Open Sans’, Arial, serif; font-weight: 400;

}