With the advancements in CSS3, fonts have become a feature to truly personalise your website and make sure you stand out from the default font types.

There have always been services such as TypeKit and Google Fonts that were able to distribute and render fonts on your website but they were often slow and caused sites to hang with poor cache mechanisms and handling on, dare I say it, a web designers pet-hate, Internet Explorer.

But, then came CSS3 and HTML5 being supported on all major browsers (even IE, wow!) which allowed us to use custom fonts, brilliant! So I thought I'd dedicate some time to finding some nice fonts, where to point yourself to find more and how to get them setup.

How to install them?

The links I share will all be from Font Squirrel that comes with a variety of different file formats:

TTF - Works in most browsers except IE and iPhone.
EOT - IE only. 
WOFF - Compressed, emerging standard. 
SVG - iPhone/iPad.

Setting up the font on your website is as simple as including the following lines at the start of your CSS file:

@font-face {
    font-family: 'YourFontName';
    src: url('/path/to/font/file.eot');
    src: url('/path/to/font/file.eot?#iefix') format('embedded-opentype'),
         url('/path/to/font/file.woff') format('woff'),
         url('/path/to/font/file.ttf') format('truetype'),
         url('/path/to/font/file.svg#YourFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

Quicksand

Quicksand - CSS3 font, ALJT Media Web Design

To download the CSS3 kit, click here.

Sansation

Sansation, CSS3 font - ALJT Media Web Design

To download the CSS3 kit, click here.

ChunkFive

Chunk Five, CSS3 font - ALJT Media Web Design

This font is ideal for headings and large titles. To download the CSS3 kit, click here.

Museo Slab

Museo Slab, CSS3 font - ALJT Media Web Design

If you're a TypeKit user, definitely worth checking out this. To view the font, click here.

Windsong

Windsong, CSS3 font - ALJT Media Web Design

This font is perfect for portfolio headings, wedding websites or anything with a fancy purpose! To download the font, click here.

Droid Sans

Droid Sans, CSS3 font - ALJT Media Web Design

I use this font for quite a number of my website to replace the main font-face, it's simple and sleek, check it out! To download the font, click here. The font is also available on Google Web Fonts.

Rambla

Rambla, CSS3 font - ALJT Media Web Design

This is quite a new font and was only recently, it is nice and simple, as a font should be. To download the font, click here.

SciFly Sans

SciFly Sans, CSS3 font - ALJT Media Web Design

This font is a similar thickness to ChunkFive, it's ideal for headers and titlles. To download the font, click here.

0
Ignite your brand, utilise user-generated content no matter where you or your audience are ›