I’ve recently been designing and coding a new website for a project that’s going to be selling a Predator Waterproof Camera and a fantastic new Liquid Images Mask which has been rather fun and exciting.

@Minute44 suggested I try out @font-face that everyone’s been going nuts about recently, and after a few more recent reads I realised that Firefox, Safari and Chrome now supported this CSS 3 property.  Now after I got going I was feeling abit blue with the whole Microsoft Fail, however I quickly came across a fantastic TTF to EOT, which Microsoft IE will use avaliable here for free (online app).  Now if like me you have mostly OTF fonts and need them converting to TTF then this page is for you (another online app, also free).  If you’re on a Mac then FontForge is your poison!

And then just upload your fonts to the same folder as your CSS File and use something like this:

/* — Funky Fontage — */

/* For the Fail Browsers.. IE */

@font-face {
font-family: “Quicksand Book”;
src: url(QuicksandBook.eot);
font-style: normal;
font-weight: normal;
}

@font-face {
font-family: “Quicksand Book”;
src: url(QuicksandBold.eot);
font-style: normal;
font-weight: bold;
}

/* Now for the Pro Browsers *cough*firefox*cough* */

@font-face {
font-family: Quicksand Book;
font-style: normal;
font-weight: normal;
src: url(QuicksandBook.otf) format(‘opentype’);
}

@font-face {
font-family: Quicksand Book;
font-style: normal;
font-weight: bold;
src: url(QuicksandBold.otf) format(‘opentype’);
}

/* — End the Custom Fonts — */

You’ll find a custom font running sexy on IE 7, IE 8, FireFox, Safari and Chrome at the Underwater Camera – Waterproof Camera website.

You can expect to see the next project I undertake to include some nice use of custom fonts for a superb web viewing experience whilst maintaining accessibility, compatability and SEO Friendly Source.