Using css3 @font-face

9 Comments

This tag offers freedom to choose font. Designers specially will find this tag more encouraging as they don’t have to bound their designs in few web font families.

So, Over all as a designer and front-end developer, I was pretty excited to give a try to it. But was lost in a misconceptions that it may not be supported by big devil “IE” and other many browsers, but I was wrong. It has separate method to do it for IE & actually IE supports this font embedding from its version 4. That was shocking news for me!, [found myself a bit guilty for blaming IE for everything. :P ]

History

This tag was introduced in CSS2 but was supported in .eot format only by Internet Explorer & Netscape Navigator. But In CSS 2.1 It was removed. Which is current version of more than 90% websites. Now its being again introduced in CSS3 version but in new and simple way. Thats what we are going to discuss here.
This tag of CSS3 is now supported by

IE4+,
Safari 3.1+,
Opera 10+,
Firefox 3.5+
Chrome 3.0 Beta.

So, This overall says that If you are computer literate or at least have installed latest browser on your system then you are ready for font freedom.

Live Example

So what is actual funda ? This is what I understood from my effort

Your web page is normal XHTML or Html which is beautified with CSS file.
In this CSS file, We create a font family which contains fonts those are non-web fonts. Means those fonts which are not so popular or not system default fonts like arial, helvetica, verdana.
We keep one TTF [ True Type Font ] file in web folder and call it as per requirement. So when ever web page calls for the font, first browser looks for that font on visitor’s system, if it exists it calls that font in web page. If its not installed, your font file gets downloaded in cache and it gets rendered on web page by browser.
Internet explorer doesn’t support TTF files for this tag, But not to worry as it supports .EOT format [Embeddable Open Type]
There are also support for woff, svg, otf file formats.

What do we need for this.

A font file in .ttf format which is licensed for @font-face tag. There are many great and free fonts on internet. I would suggest font squirrel as they have clear license declaration under each font.
A embeddable font file in .eot which can be created online from desired .ttf file. font squirrel also supports conversion too if they do not have your desired font.
A web page index.html with dummy text in it and a blank style.css file.

Lets get started !

First I created index.html file in project folder. I also created two folders called css & fonts to keep files organized.
So structure is

project
- css > style.css
- fonts > font files.

Copy paste following code in your html file.

<body>
<div style="width:500px; margin:2% auto;">
<h1>Test of @font-face tag in CSS3 </h1>
<p>Praesent pellentesque malesuada massa ac pharetra. Integer ultricies est et nibh rhoncus aliquam nec in dui. Praesent a egestas lectus. Maecenas ut enim lacus. Proin nec enim arcu. Curabitur ut sapien eu velit venenatis molestie quis et dolor. In elementum tempor tellus quis tempor. Fusce suscipit placerat velit, vel aliquam arcu porta a? Fusce venenatis neque id diam tempor accumsan? Fusce condimentum eros vitae ligula tristique dapibus. </p>
</div>
</body>

Here is code used in style.css file located in css folder

@font-face {
 font-family: 'PT Sans Narrow';
 src: url('../fonts/PT_Sans_Narrow_Bold.eot');
 src: local('PTSans NarrowBold'), local('PT Sans Narrow'), url('../fonts/PT_Sans_Narrow_Bold.ttf') format('truetype');
}
* {
	padding:0;
	margin:0;
	line-height:100.01%;
}
body {
	background:#fff;
	font-family:'PT Sans Narrow', 'arial', sans-serif;
	color:#666;
	font-size:101.1%;
}
h1 {
	font:1.6em 'PT Sans Narrow', sans-serif;
	color:#CE5013;
	font-weight:bold;
}
p {
	font: 1em'PT Sans Narrow';
	color:#333;
	line-height:1.5em;
}

Download @font-face kit used in this example.

So what @font-face code is doing here?

As you can easily understand @font-face relates to type face of font. Its declaring own font family in first line. src is locating .eot or .ttf file to browser. Before ttf file there are local strings or values which are indicating browser to find the alternatives installed on visitor’s system by providing other possible names of the same font.

Now, in css just call font name in font property and add style to it. Done !

Pros:

Gives you to choose font you want.
Design friendly rendering of page in less code
Many browsers supported, Even IE4.
Very lite to load, No flash, php or js methods required for font replacements
If visitors browser is not supported for css3 it uses default other system fonts and shows content.

Cons :

Great risk of font piracy, So clear license for use is advised when using commercial, creative commons or free fonts in projects.
Adds a bit delay while loading a page. Also shows system font first then desired font.
Font rendering quality differs from browser to browsers. As anti aliasing techniques of each browser are different. Ultimately affects design.
Renders blocks in IE when there is script called before @font-face tag.

References :

Resources :

We would like to hear from you !

9 People Responded on “Using css3 @font-face”article.

Nikhil

On February 24, 2010 at 11:14 am

Great post Veerendra!
I didn’t know about this before especially the IE v4 thing. Astonished!!!
I am working on re-design of my blog and must give a try for it.
Nikhil´s last blog ..8 Video Series: Every Web Developer Must Watch

veerendra
February 24th, 2010 at 4:54 pm

@Nikhil, Thank you for your quick comment!, I am waiting to see your blog getting new look.
Boris Ding P H | PHP . JavaScript . Ajax | JavaScript WebDev Insider

On February 25, 2010 at 2:03 am

[...] Using css3 @font-face | v-render [...]
uberVU - social comments

On February 25, 2010 at 4:00 am

Social comments and analytics for this post…

This post was mentioned on Twitter by v_render: Check out Using #css3 @ font-face in html http://bit.ly/b4U01E my 1st article on css. C&C plz! @idesignstudios @gopalraju @Powerusers…
font formats

On March 5, 2010 at 7:56 am

[...] term paper you need to ensure that you have a 12 times roman font and the page is double spaced. …Using css3 @font-face | v-renderThis tag offers freedom to choose font. Designers specially will find this tag more encouraging as [...]
6 ways to use any fonts on your site! | Hot Scripts Blog

On August 12, 2010 at 12:31 pm

[...] – Using CSS3 @font-face [...]
6 ways to use any fonts on your site! « The World of PHP

On August 12, 2010 at 2:00 pm

[...] – Using CSS3 @font-face [...]
karambir

On September 9, 2010 at 11:14 am

sir
i am a font designer . I have design a indiac unicode font for web publishing . font ( EOT, WOF And TTF)are run properly IE, Mozila and safari but google chrom not supprot

plz advoise me
regards
karambir singh rohilla
font developer
9968312113

Veerendra
September 9th, 2010 at 1:23 pm

@karambir,
Hi,
Its working good with chrome 5.
actually It depends upon version of chrome, plus what you are coding in your html n css is also important. If you can show me your test page, may be I can help.

9 Responses to “Using css3 @font-face”

You can follow any responses to this entry through the RSS 2.0 feed.

v-render