No more boring fonts for your site!

Accommodating possible font options for every user has been a daunting task in years past.  True creativity in web design has suffered to make sites more usable.  The code for hosted fonts has been available but with a cost attached.  That is changing with HTML 5 and CSS 3, hosting fonts is becoming main stream.  Let’s dig into using specific fonts for our web designs.

Tasks involved:

1. Acquire the font you wish to use on your site.  You can do a search to find an endless list of possible choices.  I downloaded a font I liked from http://www.fontsquirrel.com/ .
2. Unzip the download, and remember to include the font file when you upload your site.
3. Add a style linking to the font.
4. Apply the font to the html page.

You should be able to handle the font download so let’s dig into the code to make the font work on your site.

link to the font: Add this in the style tags.

@font-face
{
font-family: HennyPenny;
src: url('HennyPenny-Regular.otf'),  url(' HennyPenny-Regular.eot'); /* IE9 */
}

CSS to apply the font: Works with other tags as well.

p {

font-family: HennyPenny;
font-size: 12px;

}

I added the font to the page created for earlier HTML 5 posts, check out the fancy font!