System Fonts

There are some basic fonts found on all Windows machines, and others found on all Macs. These should be included near the end of your font stack if they are not your first choice.

Windows Mac
Serif Times New Roman Times
Sans-Serif Arial Helvetica
Monospace Courier New Courier

Font Stacks

Font stacks are prioritized lists of fonts, defined in the CSS font-family attribute, that the browser will cycle through until it finds a font that is installed on the user’s system. This means that you can use a lesser-known font such as Gill Sans—make that your first choice—but also control to some degree what the browser shows if a user does not have Gill Sans installed on their machine.

  • A font stack is comprised of two or more fonts separated by commas.
  • Fonts with more than one word in the name need double quotes around them.
  • The fonts are ordered by first choice followed by lesser-desired choices.
  • The font stack typically ends in a generic call to the type of font desired, such as “serif” or “monospace”. This is a last-chance effort to control the font style.
  • There are operating systems other than Windows and Mac, such as Linux. They may have the fonts you specify earlier in the stack, but will certainly have some basic serif, sans-serif and monospace fonts.
EXAMPLE

body {
font-family: “Gill Sans”, Arial, Helvetica, sans-serif;
}

ARTICLE

Better CSS Font Stacks

Early Web Font Systems

There are a number of systems out there that have been used for creating custom web fonts. The ones below are old and now considered out-of-date, but you should know about them.

SIFR

Scalable Inman Flash Replacement (sIFR) dates back to 2005. sIFR embeds a font in a Flash element that displays the text, pre-empting the need for a font to have been manually pre-installed on a user’s system. Unlike graphical text (for example, an image file created by Photoshop,) sIFR text can be scalable withour pixelation, and it can be selected on the screen.

sIFR requires not only CSS, but Flash and JavaScript to generate custom fonts in the browser. Both Flash and JavaScript must be enabled for the fonts to be viewed. Some people disable JavaScript, and iDevices (such as iPhone) don’t support Flash.

CUFÓN

Cufón converts font paths to vector graphics and then renders the fonts in the browser using JavaScript. This was used extensively until @font-face had broader browser support.

A disadvantage in using Cufón is the requirement that the embedded font’s license allow its distribution in unencrypted form, which many commercial fonts expressly forbid.

Modern Web Fonts

Google Fonts

EXERCISE: USING GOOGLE FONTS

A Google font is used for all of the headings on this website. Google fonts are free, are very easy to use, and can assure that everyone can see just the font you chose. There are hundreds of fonts available, and more are added all the time.

The drawback? You cannot use just any old font you want to with this technique.

DOWNLOAD
  1. Download and unzip the basic site folder linked below. It contains a page of content about web fonts. The page is linked to a stylesheet that has two rules with no declarations yet, one for body and one for all the headings. You will be selecting a Google font for each of those two purposes and implementing them in your HTML and CSS.
  2. Rename the site folder as google-fonts.

Web Font Exercise Files

SELECTING GOOGLE FONTS
  1. Check out the link below and navigate around to appreciate the variety of fonts available from Google. You’ll notice that as you scroll down, more are added to the bottom of the list.

Choose a Google Font

Google Fonts home page
  1. Go through and look at a bunch of the available fonts. Select a decorative one for your headings, and click the blue Add to Collection button for it. Select a plainer, more legible font for your main body copy, and add it to your collection.
  2. Click on the Review button in the bottom-right corner of your browser window.
Google fonts review of two fonts

You have the option to display either one as Paragraph or Headline text.

If you don’t like what you’ve chosen, click the Choose button, remove a font or two, and select other(s).

GETTING THE GOOGLE FONT CODE AND INSTALLING IT ON YOUR SITE
  1. When you have two great fonts that work well together, click the Use button in the bottom right. Don’t simply use the same fonts I chose.
  2. Scroll down and look at boxes 3 and 4.
oogle Fonts use the fonts
  1. Copy the line of code from box 3 and paste it into the <head> element of your index.html file. This code links to the stylesheets for your fonts on Google’s web server.
Google Font link element stylesheet Google Fonts add link element to head element
  1. Create a site definition for your google-fonts folder in Dreamweaver.
  2. Define a font stack for each of the CSS rules in your stylesheet. Use fonts which are similar to your Google Font choices. Remember to use quotes around font names with more than one word in them. Don’t simply one the ones in my example. Try the Font Stack Builder in the link below.

Tool: Font Stack Builder

font stack for body and headers CSS
USING THE GOOGLE FONTS IN YOUR CSS
  1. Add your Google Font names at the beginning of your font stacks.
Google Fonts added to font stack in CSS
  1. Test index.html in a browser.
testing web page with Google Fonts in a browser
  1. Adjust your font sizes, colors and margins so that your fonts look really good. Again, don’t simply use my settings. Decide what looks best for your font choices.
adjust CSS sizing box model for Google Fonts final web page layout with Google Fonts

@font-face

The @font-face CSS technique allows you to upload font files on your own site and refer to them in your stylesheets. There are many ways to accomplish this, so I will just show you a couple.

FONTSPRING

FontSpring sells typefaces, and you can buy them in packages with or without the webfont files. Below is a link to the display page for Primca Nova, one of the fonts they sell which is currently very popular with web designers:

Proxima Nova

If you purchase the webfont files, you get the font with the following file extensions (as well as the OpenType files for print):

  • eot—Embedded OpenType, for Internet Explorer
  • svg—Scalable Vector Graphic, for Safari, Chrome and Opera
  • ttf—TrueType Font, for Firefox, Safari, Chrome and Opera
  • woff—Web Open Font Format, for most modern browsers, but not the older ones

These are the file formats you need to upload for each of the font faces you intend to use. They provide @font-face support for most versions of most browsers in use today. I keep them all in a folder named webfonts within my site folder.

@font-face web fonts folder

Then you need to do two things in your stylesheet. First, write the @fon-face rules for each of the typefaces you plan to use. The @font-face rule for each typeface has a declaration for each file type available for the browsers.

@font-face rules declarations CSS

Having given each of your typefaces a name in the @font-face rules, go ahead and start using those names in your regular CSS font stacks, as you would with any other font name.

@font-face rules declarations CSS

Because you have theoretically purchased and now own these fonts, you avoid any typeface piracy or licensing issues.

FONT SQUIRREL

Font Squirrel has two main features which are free. One feature allows you to download any one of over seven hundred fonts for commercial use.

FontSquirrel home page FontSquirrel individual font page St. Marie

Each one has a distinct license arrangement so be sure to read up on them.

FontSquirrel icense agreement for St. Marie

Several of these fonts have a link for the @font-face kit. You would get to download each of the font file types recommended for cross-browser support.

FontSquirrel @font-face kit for St. Marie

If you want to view only the fonts they have which offer @font-face kits, click the @font-face Kits link in the main menu.

FontSquirrel @font-face kits page

You may also upload fonts from your own computer. Click the @font-face Generator link in the main menu.

FontSquirrel @font-face generator page

To stay on the safe side of the law, make sure to only upload fonts from your machine that you know you have licensing for.

EXERCISE: USING FONT SQUIRREL
Download
  1. Download and unzip the basic site folder linked below. This is the same file you downloaded before for Google Fonts, so if you still have that ZIP file, unarchive/extract it again. You will be selecting fonts on your computer and implementing them in your HTML and CSS.
  2. Rename the site folder as fontsquirrel.

Web Font Exercise Files

  1. Find two fonts on your computer which you would like to use, one for headings and one for paragraphs. One way to do this is to open Microsoft Word and experiment with how fonts look there. Make note of the names of the fonts you want to use.
selecting fonts with Microsoft Word, Bodoni and Candara
  1. Go to the @font-face Generator page at FontSquirrel.com.
  2. Click on the Add Fonts button, navigate to one of the font files you have chosen, and click OK.
    • On the PC: fonts can typically be found in C:\Windows\Fonts. You may need to copy-and-paste from here onto the desktop so that FontSquirrel can see the files.
    • On the Mac: fonts can typically be found in /System/Library/Fonts/.
FontSquirrel @font-face generator add font

In some cases you may need to select a different font because the copyright holder has not agreed to this kind of licensing:

FontSquirrel font blacklisted by copyright holder

When you’ve successfully uploaded a font for conversion, it will be listed under the Add Font button.

FontSquirrel font succesfully uploaded for webfont conversion
  1. Get both of your fonts uploaded, select the Optimal radio button, and check the Agreement checkbox (in the real world, make sure you are on the right side of the law.)
  2. Click on Download Your Kit.
FontSquirrel download your @fnt-face generator kit
  1. Wait for the fonts to be generated, then save the ZIP file that is offered for download.
  2. Unzip the ZIP file and take a look at the files you’ve been given.
FontSquirrel @font-face kit contents on windows
  1. Note that you’ve also been given a couple of HTML files and a stylesheet as demos. Take a look at the HTML files in a browser, and stylesheet.css in Dreamweaver.
FontSquirrel web font demo Constantia FontSquirrel web font demo Candara FontSquirrel demo code CSS stylesheet
  1. Create a site definition for your fontsquirrel folder in Dreamweaver.
  2. Copy the two @font-face styles from the stylesheet.css file provided by Font Squirell into the styles.css file located in your fontsquirrel folder.
  3. Locate each of the .eot, .svg, .ttf, and .woff files provided by Font Squirrel. Copy and paste them into a new folder named webfonts in your fontsquirrel folder.
webfonts in windows explorer
  1. Back in styles.css, add the webfonts folder name to the paths of the font files (look for the url() values.)
FontSquirrel @font-face rules with updated paths
  1. As before, create font stacks for your body and headings. Then add the respective font names from your @font-face rules at the beginning of each stack.
@font-face fonts stacks in CSS
  1. Test index.html in a browser. Make sure your web fonts are appearing. If not, fix your code.
@font-face web fonts in action in the browser
  1. As before, add some CSS to make your text look really good.
@font-face plus nice type styles in browser css

Sites With Beautiful Type

VIDEO: Dan Brown – More Perfect Web Typography

Find three websites with beautiful typography. Include the urls and explain why you picked them.