No Problem!
Just let us know what you want and we’ll get back to you with a price. Simple.
Please fill in all fields marked * Your Message*

Your Name*
Your Email*
t: 0113 244 9399 // e: [email protected]
website designers based in Leeds

the web designer’s Notebook

Web Designer's Notebook

Welcome to the web designer’s notebook! We try to feed web designer’s with a relevant source of information relating to web design and development. Enjoy!

Design Trends April 1st, 2010
Add to add Add this design post to Delicious Add this design post to Stumbleupon Add this design post to Digg

Easy guide to CSS3 @fontface



@font-face tutorial So you may have seen my quick post about Web Typography Trends that focused on the recent aesthetic changes we were seeing in web typography. Since then some of you have got in contact wanting to know more about websites that embed or link to real fonts and what methods web designers use to do this. Many of you have probably heard of flash replacement techniques or solutions that require Javascript (sIFR, Cufon, etc…). I myself have found that no replacement technique matches the capabilities, usability and overall flexibility of the CSS property @fontface. In this post I will explain a little about what @fontface is and also show you how to easily implement it within your designs.


So what’s @fontface all about?

Simply put, the @fontface CSS property enables real fonts to be displayed within a user’s browser without the font having to be permanently installed on the user’s machine. It does this by linking to the font that can be called by use of a very simple CSS line called in your stylesheet. Although this is not a new CSS feature, it has been only recently reintroduced with CSS3.

All sounds pretty impressive, I’m sure you agree! However, whilst @fontface is available in the current versions of all major browsers, I’ve found it slightly unreliable in creating a consistent cross-browser experience with custom fonts. It’s not something that should put you off, just something to be vigilant about.


What browsers support @fontface?

Internet Explorer requires .eot (Embedded OpenType), Firefox requires either .otf, .ttf or .woff (Web Open Font Format), Safari is fine with .oft and .ttf and Chrome, Opera and the iPhone require .svg (based on the Scalable Vector Graphics format). There is a multitude of converters out there that will help you to get every font-format you need.

Besides Internet Explorer, which supported @fontface since IE4(!) only the latest version of above browsers support @fontface, that’s why it is essential that you define a web safe font as fallback as shown in this tutorial code.

WARNING: If you are not using one of these browsers there is a very good chance that the font will not appear. I guarantee it’s your fault not mine..!


So what fonts can we use?

One of the big problems that has font foundries understandably worried is that by using @fontface every slightly savvy user is able to download the fonts that are embedded. Obviously font foundries and creators won’t agree to the free distribution of their fonts.

For some of these commercial fonts you will likely have to go through a third party (like Typekit). For me, I would suggest you are better off using the range of free fonts you can find from sites like Font Squirrel. They have a section on @fontface that houses 100+ of free fonts to download in all platform file types. Perfect!

I have put a list at the end of this post of some of my favorite fonts that are available to use with @fontface to help you if you’re undecided.

Quick tip before we start:
Most (good) designers will use this CSS property for headers only. Just because @fontface opens up use to all 7 of your favourite balloon fonts doesn’t mean you need to go ahead and use them! Think of using it to ice an already very nice cake.



Okay so how do we use @fontface?

Blackout-2am As I've mentioned above there are some limitations about the availability of some fonts, but we already have a vast variety of free ones at our disposal. The font I will be using for this quick demo is Blackout-2am. You can either download it by clicking on the icon to the left or you can replace it with another compatible font of your choice. (Font file type must have versions of a .ttf/.otf, .svg and .eot to work across all major browsers).


Step 1 - Link to your font using @fontface

Right so you have the font you want to use now you need to link to it in the CSS.

1@font-face {
2font-family: 'Blackout2AM';
3src: url('Blackout-2am.eot');
4src: url('Blackout'), local('Blackout-2AM'),
5url('Blackout-2am.woff') format('woff'),
6url('Blackout-2am.ttf') format('truetype'),
7url('Blackout-2am.svg#Blackout-2AM') format('svg'),
8}


Let’s break it down so you know what is going on:

Line 2 This part of the code assigns the chosen font to a ‘font-family’ which you can call whatever you like.
Line 3 Recognised by Internet Explorer (.eot)
Line 4 This is the local setting which will call it from your machine if it exists.
Line 5 This is only for Firefox 3.6+ but worth putting in (.woff)
Line 6 This will cover you for browsers like Safari and Firefox below version 3.6 (.ttf).
Line 7 Will work on Chrome and Opera as well as providing some cover for mobile internet (.svg).

As I said earlier, different browsers use different file types so it is important to cover yourself and link to them all if you can.

Step 2 - Assign your new font-family to a class

Next step is to make a class that uses your new font-family. The example below I’ve simply called ‘my-new-font’. You'll notice that I have only named our new font-family, but it is always better to name a few for the browsers that don’t support @fontface or for the ones that for some reason can’t find the font you have linked to. This is done in the same way as you would normally. (font-family: Karabine, Verdana, Sans-serif;)

1.my-new-font {
2font-family: 'Blackout2AM';
3font-size: 60px;
4}


Step 3 - Call the class in your HTML!

The last stage is just to call the CSS class you have created into your HTML. The best way to do this is just to create a span! Yes it is as simple as that!

1<span class="my-new-font">check this out!</span>


check this out!

Some of my favourites!

Below are some of my favourite fonts to use with @fontface. I’ve even been extra helpful and attached a working demo to each of them! Just click on the picture to start downloading!

web typography - Ballpark - @font-face web typography - Chantelli - @font-face web typography - FFF-Tusj - @font-face web typography - Quicksand - @font-face web typography - BlackJack - @font-face
Hope this post will help you in understanding a little more about @fontface and how to use it. Please do feel free to leave any comments or questions underneath and I’ll try and get back to you as soon as I can.

See ya soon! Tim

Search


Search Web Designer Notebook Search Web Designer Notebook



Catergories
Web Design Leeds - Catergories


Twitter Rabbit Hole Designs Leeds Twitter
follow us...
"Promoted tweets went live today, looks like Twitter are finally trying to make some money, K-chiiiing! - http://bit.ly/9VCCbX
rhdesignsltd
" We now feature on CSS Heaven! - http://bit.ly/arUy8V it's wicked to see our site being showcased for web design inspiration. Cheers guys!"
rhdesignsltd
Our RSS feed for The Web Designer’s Notebook is now working again, thanks @crossinghippos for the heads up - http://bit.ly/aY1iIm"
rhdesignsltd


Ads

Cheap Hosting
Web Tutorial (t) , , ,
Your Comments...

Anon rabbit blogger
4 Irene

Great ^^! Thx~

Anon rabbit blogger
3 Jack May

Thank you for this post. I’m so sick of seeing the same old fonts on the net. However I am slightly concerned about how much power it gives designers, some of which have no clue about good typography…

Anon rabbit blogger
2 Riyu

Thanx for the free downloads Tim! I love this site too. Look forward to the next one. Peace x

Anon rabbit blogger
1 Lil-Sarah

I never even knew about this @fontface!! gr8 post, keep them coming!



Write your comments here...

*Name: Website:
*Email:
*Message:

previous postsBack to posts
current projects

• LLimah International Ltd
• Chapel Allerton Tennis, Squash & Gym
• Milfield Primary School
• Freddy Fit
• Warren v10.2
• Raquette Bistro
UPCOMING EVENTS

High Tech Talent - 08.04.10
Future Web Design London - 17.05.10
New Designer’s - 01.06.10
Latest Thoughts

PHP Basics: Playing With Strings - 2010-04-26
Play Super Balloon Popping Frisbee Thrower 3000! - 2010-04-23
Seen Google Maps Street View in 3D yet? - 2010-04-07
Easy guide to CSS3 @fontface - 2010-04-01
SEO Basics - Where To Place Keywords In Your Webpage - 2010-03-26
Inspiring Web Typography - 2010-03-26
Notebook Official Launch this Wednesday! - 2010-03-23
See more...
Why not Drop By?

Rabbit Hole Designs
25 Shafton Lane
Leeds, West Yorkshire
LS11 9RE
Call. 0113 244 9399
Email. [email protected]

Rabbit Hole Designs Studio | Website designers Leeds