Terrific Typography

Post 71 of 75

customfontsI’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.

, , , , ,

2 comments:

Félix BellangerJanuary 12, 2010 at 12:04 amReply

Hey,

Just spent like 3 hours to figure out why I can’t make this works (or any other solutions in the same style for that matter) on IE, I wonder if you could help me out.

You can find what I did here:
> http://www.emptyworld.fr/
> http://www.emptyworld.fr/screen.css

The “Home” text is supposed to load a font but can’t get it working on IE even though I have the “.eot” file.

Thanks in advance.

adminJanuary 12, 2010 at 1:39 amReply

Hi mate, code it like I have, IE will read one and FF/Safari etc will read the other.

Your font name also has to be perfectly matching the font’s name, so try:
“TrajanPro-Regular” instead of “TrajanProRegular” like you’ve put.

Also try making them a OTF not a TTF. The converters above.

~Adam

Menu