Adding a Custom Font Face on Your Website

One of the things on the web for quite some time is being limited to the fonts available.

Just a few basics fonts are available:

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

Windows fonts / Mac fonts / Font family
Normal style Bold style
Arial, Arial, Helvetica, sans-serif Arial, Arial, Helvetica, sans-serif
Arial Black, Arial Black, Gadget, sans-serif Arial Black, Arial Black, Gadget, sans-serif
Comic Sans MS, Comic Sans MS5, cursive Comic Sans MS, Comic Sans MS5, cursive
Courier New, Courier New, monospace Courier New, Courier New, monospace
Georgia1, Georgia, serif Georgia1, Georgia, serif
Impact, Impact5, Charcoal6, sans-serif Impact, Impact5, Charcoal6, sans-serif
Lucida Console, Monaco5, monospace Lucida Console, Monaco5, monospace
Lucida Sans Unicode, Lucida Grande, sans-serif Lucida Sans Unicode, Lucida Grande, sans-serif
Palatino Linotype, Book Antiqua3, Palatino, serif Palatino Linotype, Book Antiqua3, Palatino, serif
Tahoma, Geneva, sans-serif Tahoma, Geneva, sans-serif
Times New Roman, Times New Roman, Times, serif Times New Roman, Times New Roman, Times, serif
Trebuchet MS1, Trebuchet MS, sans-serif Trebuchet MS1, Trebuchet MS, sans-serif
Verdana, Verdana, Geneva, sans-serif Verdana, Verdana, Geneva, sans-serif
Symbol, Symbol (Symbol2, Symbol2) Symbol, Symbol (Symbol2, Symbol2)
Webdings, Webdings (Webdings2, Webdings2) Webdings, Webdings (Webdings2, Webdings2)
Wingdings, Zapf Dingbats (Wingdings2Zapf Dingbats2) Wingdings, Zapf Dingbats (Wingdings2Zapf Dingbats2)
MS Sans Serif4, Geneva, sans-serif MS Sans Serif4, Geneva, sans-serif
MS Serif4, New York6, serif MS Serif4, New York6, serif

There may not be a font that you want to use … easy enough to help with that.

You can use a site like Font Squirrel and download a font face to use.

@charset 'utf-8';

@font-face
{
     font-family: {name of font};
     src: url({location of font});
}

body
{
     font-family: {name of font};
}

Or you can use a site link Google Fonts. Google provides multiple ways to include the font into your page via standard text/css stylesheet, @import to your stylesheet, or via Javasscript directly.

Advertisements
  1. Leave a comment

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

%d bloggers like this: