Using Fonts on the Web

It’s fun to go through all of the fonts on your computer and use them on your Region website. However, keep in mind thatnot everyone will have your fun font on their computer. So, it’s a good idea to use fonts that the majority of people will have and can view. You should also have a back-up font declared so that everyone can see your Region website the way it was meant to be seen..

Declaring Your Fonts

You can declare your fonts in CSS. Follow the format below:

font-family: Geneva, Arial, sans-serif;

You can add as many fonts to your declaration as you like. The first font is what will be displayed. Each font listed after that will be the fallback if the first font doesn’t work. So, say the user doesn’t have Geneva on their computer. It will try to display the page in Arial. If they don’t have Arial either, it will use the basic sans-serif font on the computer’s system.

Common Web Fonts

Choosing a font can be difficult because users work on different types of computers. Macs and Linux have different fonts than regular PCs, so even if your font is a "normal" font on a Mac, it might not be visible for a user on a PC. Here is a list of fonts that render on all computer formats:

SERIF FONTS Default: serif Times New Roman Georgia Times

SANS-SERIF FONTS Default: sans-serif Arial Verdana Arial Black Comic Sans MS Trebuchet MS Impact Tahoma Arial Narrow Helvetica Century Gothic

MONOSPACE FONTS Default: monospace Courier Courier New Lucida Console

For more information on web safe fonts, click here.

Font Kits

There are font kits of fonts out there that allow you to use custom, more elaborate fonts on your website. Typekit is a service owned by Adobe that lets your put whatever font you like on your website, although if you use more than two fonts on one website, you must subscribe to their paid service.

Other websites that offer free fonts are Font Spring and Font Squirrel.

To embed a font into your website, add this piece to the top of your style sheet:

@font-face {
    font-family: jeannie_font;
    src: local(jeannie_font), url('fonts/jeannie.ttf') format('opentype');
}

If you have questions, please let us know in the comments!