Okay. We’re in the 21st century here. You can use more than just “Arial” for sans-serif, “Times” for serif and “Courier” for monospace. Those are all actually great fonts that have their place (this site even uses Arial), but let’s try to step up our game a little bit. Personally, I am in love with Google Web Fonts which allows you to build up a collection of fonts and embed them straight into your page using a stylesheet link.

So in your html document’s you would put this:

<link href='http://fonts.googleapis.com/css?family=Medula+One|Voltaire' rel='stylesheet' type='text/css'>

Then, in your CSS, you can just reference it like this:

h1 { font-family: 'Medula One'; font-size: 48px; }

What if you don’t trust using Google as much as you do hosting your own resources? Well, you can still find great royalty-free fonts at Google, but then download them and go to Font Squirrel to create your own @font-face embeddable font kits in a snap. They convert the fonts into as many formats as possible to ensure compatibility in the widest range of browsers.

Comments

comments

Powered by Facebook Comments