@fontface : Expressing it with a font of your choice; Using WebFonts

CSS completed 10 years existence this year! Those who have been around for a while , earning their bread (or not) using CSS, then you might aware how we have been starving for  a good selection of fonts.  Even with the lack of fonts designers like those at  CSS Zen Garden have made use of CSS background images to replace fonts  in the pursuit of doing some justice to their designs .  We have also tried Flash/JavaScript® hacks to achieve our design goals.  By no means this is  a wrong way to get the fonts we desire into our web designs, but definitely, it is not the most desirable way.  and over years web designer, like me ,  have fully relied  on ten or so  fonts for their designs.

Recent developments in web standards and font formats make it possible to render HTML text in typefaces other than the same old default fonts.   Comes in  the “@fontface” CSS decleration.

@fontface provids a solution to link  to the actual font file and retrieve it from the web.  Using @fontface , designers can use  fonts without having to freeze the text as background images.  The implementation is very straight forward, as shown below but  as all good things have a CON part to it , NOT ALL browsers support a single “font type “.  If you are planning to use @fontface in site with requiring cross browser support, then you will have to provide sources to various font-types of the same.

  1. TrueType – A format designed to look good on-screen. Recommended particularly for Windows browsers (Chrome).
  2. OpenType (CFF) – This format is better for print work and does not always look good on Windows.
  3. EOT – You need this format if you want to target Internet Explorer. IE will not use any other format. Our EOT’s would be considered “Lite,” since they are neither compressed nor domain-restricted.
  4. SVG – This is an XML format supported by some browsers including the iPhone.
  5. WOFF – This cross-browser, web-only font format is lightweight (font data is zip compressed) and can be compiled with either TrueType or PostScript (CFF) outlines. It is currently supported by FireFox 3.6+.

Using @fontface

@font-face {
font-family: 'CalligraphyFLFRegular';
src: url('CalligraphyFLF.eot');
src: local('CalligraphyFLF'), local('CalligraphyFLF'), url('CalligraphyFLF.woff') format('woff'), url('CalligraphyFLF.ttf')        format('truetype'), url('CalligraphyFLF.svg#CalligraphyFLF') format('svg');

@font-face {
  font-family: "Your typeface";
  src: url("fonts/font_filename.eot");
  src: local("Alternate name"), local("Alternatename"),
    url("fonts/font_filename.woff") format("woff"),
    url("fonts/font_filename.otf") format("opentype"),
    url("fonts/font_filename.svg#font_filename") format("svg");
h2 { font-family: "Your typeface", Georgia, serif; }

As you can see from the above example, to include the chosen font typeface, one has to link to a set of fonttypes for the same typeface. Hence people refer to it as “Font Kit”.
There are Font Kits available that explicitly allows linking with the CSS @font-face property to it under End User License Agreement (EULA).

Useful WebFont Resources :

  • Fonts available for @font-face embedding wiki page at http://webfonts.info/wiki/index.php?title=Main_Page
  • Ray Larabie .  He is a renowned font designer who has made hundreds of interesting TrueType fonts freely available for use on the web. His fonts are elegant, decorative, and playful.
  • Dieter Steffmann is another great font designer. He, too, has made many beautiful fonts available for anyone to use.
  • Font shop : offers fonts designed specifically for web use.  More than 30 of the most successful FontFont families are now available as Web FontFonts.   FontShop  also has  a detailed WebFont user guide  http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  • Font Squirrel :  Showcases all the fonts that Font Squirrel offers for use with @font-face CSS embedding. Font Squirrel offers an impressive quantity of type, makes it dead simple to pick one out, and handily offers “kits” – the typeface of your choice, in several formats, packaged with demo HTML & CSS that uses very current @font-face syntax. They also offer a way to make your own @font-face kits.  If the typeface you want to use has been licensed appropriately (the ones that come with your computer are not necessarily okay), the generator produces EOT, SVG, and hey! WOFF files.

get ExpressingIT News by Email Subscribe to ExpressingIT by Email |  Follow Me on Twitter

March, 2010
By : Nikhil
Tags : ,
Posted in : CSS
No Comments »

Its about the “Web designers who can’t code”

With my limited skill-set with tools like Photoshop and Illustrator, I can honestly confess that I’m a better developer than I am a designer. But my background with core (server side) development with Java/PHP/COBOL , has been a very positive influence on my UI development skills. What I mean is, while creating my designs,i.e. whenever I do design, I think about how the design can be best converted into HTML-CSS and while doing the HTML-CSS, I give a thought about the backend technology and make reasonably sure that the HTML can be easily implemented into XSL loops or PHP snippets etc.

Over years, I have been thrown head on to designs by UI designers who probably donot have a clue what HTML or CSS is. All these years I have been thinking that I would asking for too much, If I just expect the designer, who is trying to shov his “impossible to code” design down my throat, to understand just a little bit what his design would be converted into. THAT would help right?

Then, I came across this post today … Web designers who can’t code …Thanks Lord! I’m just one of many who feel the same … The above artitle is a bit a long winded .. but worth the read, every word of it.

Thanks Elliot Jay Stocks … I feel relieved!

Here is some excerpts from Elliots article.

Wow, what a day! It started with one little tweet and ended with a discussion that seemed to sweep across the whole web design community. It appears there are some very strong opinions held on the subject of whether web designers should be able to code.

So, before we get into this, allow me to quickly recap what I said on this morning on Twitter:

Honestly, I’m shocked that in 2010 I’m still coming across ‘web designers’ who can’t code their own designs. No excuse.

… I should’ve been a little more specific in my tweet. I was talking about designers who don’t have even the most basic HTML and CSS skills to turn a flat design into an actual site. Not people who intentionally choose not to code; those who can’t. And I’m also referring only to front-end code here; of course it’s ridiculous to think that designers should also be amazing back-end programmers …

We get ‘web’ designs sent in Illustrator, 300dpi, impossible to code, no consistency / usability.
~ Amy Mahon

It’s getting late, and I’ve got to wrap this up somehow. I know there will be many who disagree with me, and my intention is not to offend or upset anyone who can’t code, but I hope that some of what I’ve said reflects some of the points that always come up when delving into this debate.

At the end of the day, I don’t lose any sleep over who can code and who can’t. I’m just genuinely surprised to find so many designers that lack front-end skills, as I thought this was a thing of the past.

Also read the comments , there were around 320 comments, as i write … they are worth a read.
Please read Elliots full post here .. Web designers who can’t code

get ExpressingIT News by Email Subscribe to ExpressingIT by Email |  Follow Me on Twitter

March, 2010
By : Nikhil
Posted in : UI Developer, User Interface Desgin, Web Developer
No Comments »

Aligning radio button with text

Since the radio button and the text are inline, so the text will align itself to the bottom of the radio button, The the text will appear to be slightly under the radio button.
If you want these to align to the top, you’ll have to place the radio and the text into separate containers like divs or spans ( as appropriate) and they will take care of the alignment. It would be easier to use table cells too, of your design brief permits it.

This won’t look the same in every browser, as every browser displays radios slightly differently, so there’s always going to be size issues no matter what you do.

get ExpressingIT News by Email Subscribe to ExpressingIT by Email |  Follow Me on Twitter

March, 2010
By : Nikhil
Posted in : Browser Quirks, HTML
No Comments »

What will HTML5 bring?

HTML5 is still a draft. As I write, Work on HTML 5, which commenced in 2004, is still being given shape by a joint effort between the W3C HTML WG and the WHATWG.   The word is that the next gen HTML will have  enhancements and  features, which would new structure and semantics , form controls, APIs, multimedia tags etc..

In simple English … what would it mean to  us UI developers …

  • There will addition of some structural tags  viz.  <article>, <section>, <header>, <aside>, and <nav>, which would replace the majority of <div>s used on a web page, making your pages a bit more semantic, but more importantly, easier to read.
    Hey! Just imagine the effort saved in finding that one missing close DIV tag.

Instead of

  <div id="header">...</div>
  <div id="nav">...</div>
  <div class="article">
    <div class="section">
  <div id="aside">...</div>
  <div id="footer">...</div>
  • With the advent of  audio and video content like YouTube, the use of embedded multimedia on the webpage has increaded by fold. Taking this into account , Now the plan is to add native support for embedding video and audio into the browser itself,  hence allow users to play, pause, stop, seek, and adjust volume using the builtin DOM APIs for scripts to control the playback.


<video poster="poster.jpg">
    <source src="video.3gp" type="video/3gpp"
        <source src="video.mp4" type="video/mp4">
  <source src="music.oga" type="audio/ogg">
  <source src="music.mp3" type="audio/mpeg">
  • Better-defined semantic roles for existing elements  for eg. <strong> and <em> might now actually have different  meanings i.e.  they will behave differently.

There are many more changes/upgrades to the newer version … Will keep updating this post as I come accross any interesting useful ones …. Watch this space

This document may not provide accurate information as the HTML 5 specification is still actively in development. When in doubt, always check the HTML 5 specification here.

get ExpressingIT News by Email Subscribe to ExpressingIT by Email |  Follow Me on Twitter

January, 2010
By : Nikhil
Tags :
Posted in : HTML
1 Comment »

CSS ZOOM – Yet Another IE quirk; The 3 pixel shift

Time and over again, When all the other browsers seen to behave as told by the w3c rules , IE spirals you out of the development spirit by throwing a tantrum,  that doesn’t seem to have a fix . Just such a one is this issue in IE7.

Problem Statement:
I  and  so might many of the other  serious web developers have  noticed more than many a times , that when there nested floats in the layout, on hover over some links ( anchor tags) , the containing container seems to shift a few pixels to the right.   I have tried to google solutions for this issue , but have  hardly found any reasonable answer to why and when it occurs ( that might help to prevent this issue from happening)  , hence  I  have never found a clear solution to the problem either…

Possible Solution :
Out of experience , I have notice 90% percent of the times  i.e. ,  that this issue is fixed by adding a zoom property in the CSS definition of the mis-behaving container …

#somediv {
      zoom: 1 ;

again the reasons are ambiguous … try this …
Some elements in IE have a “hasLayout” property , which is “true” by default. Many visual CSS behaviors ; for example, an alpha filter only works on an element that hasLayout. and the {Zoom:1} seems to give the target elements the hasLayout property…. USeful? I dont think so…

The zoom property is also seems to supported by Chrome , but  its use  dint seem to make much adverse effect on my layout… try it, If it works for you … if it doesn’t,  bookmark this page under “CSS craps”

get ExpressingIT News by Email Subscribe to ExpressingIT by Email |  Follow Me on Twitter

November, 2009
By : Nikhil
Tags : , ,
Posted in : CSS


  • The Document Type Declaration needs to be present at the beginning of a document that uses the HTML syntax. It may optionally be used within the XHTML syntax, but it is not required. The XHTML document does not need to include the DOCTYPE because XHTML documents that are delivered correctly using an XML MIME type and are processed as XML by browsers, are always rendered in no quirks mode.
  • In XHTML, tag names are case sensitive and are usually defined to be written in lowercase. In HTML, however, tag names are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase. The case of the start and end tags do not have to be the same, but being consistent does make the code look cleaner.


  • Backwards compatible with existing browsers
  • Authors are already familiar with the syntax
  • The lenient and forgiving syntax means there will be no user-hostile “Yellow Screen of Death” if a mistake accidentally slips through
  • Convenient shorthand syntax, e.g. authors can omit some tags and attribute values


  • Strict XML syntax encourages authors to write well-formed markup, which some authors may find easier to maintain
  • Integrates directly with other XML vocabularies, such as SVG and MathML
  • Allows the use of XML Processing, which some authors use as part of their editing and/or publishing processes

get ExpressingIT News by Email Subscribe to ExpressingIT by Email |  Follow Me on Twitter

October, 2009
By : Nikhil
Tags :
Posted in : HTML, Web Developer
No Comments »

CSS2.1 User Agent Style Sheet Defaults

Yesterday,  after the issue I encountered with the CSS Resets in Google Chrome… I thought of digging a bit deeper into the area of  User Agent Style Sheets …
Found this table on default values of CSS2.1 User Agent Style Sheets … ( for those unaware of what “User Agent Style Sheets” is follow What is User Agent Style Sheets (Specification) .

For a full list of CSS 2.1 User Agent Style Sheets defaults click here

get ExpressingIT News by Email Subscribe to ExpressingIT by Email |  Follow Me on Twitter

July, 2009
By : Nikhil
Tags :
Posted in : CSS, User Interface Desgin, Web Developer
1 Comment »

User Agent Style Sheets : Mystery Margins in Google Chrome

Yesterday,  like every other “Ground Hog  Day” ,  I was working on some CSS/tableless  layouts. All was going well in IE 7, FF 3 and Chrome, untill suddenly,   I saw some un-ignorable margins seen only in Google Chrome.   Though very strange and worring, It  was some new bug/issue that I had come accross, there was  finally some spice in my mundane work . Sad (but nice) it got fixed within a few minutes of the probe…

Basically ,  It looked like  Google Chrome ignored my CSS Resets  ( margin:0px).  It actually was  caused by the user agent stylesheet (-webkit-padding-start:40px).  So the solution was to reset this style by setting padding:0 the misbehaving elements .
A  good way to prevent this problem from happening to any element is use a global CSS Rest as follows

*{ margin:0; padding:0; }

What is User Agent Style Sheets (Specification) ?
The following  excerpt is taken  from http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , follow link to read more on User Agent Style Sheets

CSS 1 introduces the idea by stating that each User Agent (UA, often a ‘web browser’ or ‘web client’) will have a default style sheet that presents documents in a reasonable – but arguably mundane – manner. CSS 2 says that conforming user agents must apply a default style sheet (or behave as if they did) and that a user agent’s default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language; CSS 3 is likely to be of the same mind.

Since the CSS specifications leave it up to implementations whether to use a “real” style sheet for default display or not, it’s not astonishing that you don’t find a default style sheet in every browser’s installation folder. Unlike Microsoft’s Internet Explorer as well as Opera, for example (and as far as I know), Gecko browsers like Firefox and Netscape Navigator (look for “html.css”) but also Konqueror make it rather simple to comprehend their default styling.

get ExpressingIT News by Email Subscribe to ExpressingIT by Email |  Follow Me on Twitter

July, 2009
By : Nikhil
Tags : , , ,
Posted in : CSS, User Interface Desgin, Web Developer

How To Enable Writing to Status Bar (window.status) in Firefox

Another old school memory supplemental…

Why do we to enable windos.status?
Javascripts could to be a nightmare when you have something to debug .  Firefox does have a few handy addons, like Firebug thats makes our lives easy  and   Also , the vote for the  most popular debug  technique in Javascript must go to “ALERT()” .  Anywaz! There are few instances when adding ALERT do debug your mis-behaving Javascript  is just isn’t a good idea. For example! you have dragble item whose position  needs to be alerted …. NO NO! Dont do it! … you will  just get  infinite alerts  or you wont be able actually drap your dragable. Well! There are more good situations, where you might writing out debug texts to the status bar, much more usful… Believe me! Its Experience!

IE by default left you write to the browser STATUS Bar  using the syntax “window.status = ‘ something to debug’ “, but FireFox doesn’t  . So to enable windows status change , you can do either of the following.

Open about:config in browser ( type “about:config this into the address bar )  and search for
.  Change it to false… just click on the entry to toggle its state.

OR Alternatively

Tools → Options → Content → Enable JavaScript / Advanced → Change status bar text

And also note that … to write to the status bar in your Javascript, IE is just ok if you use a short syntax i.e. status =’ some debug text’ but in FireFox, you have to use in full syntax i.e.  window.status = ‘ something to debug’

get ExpressingIT News by Email Subscribe to ExpressingIT by Email |  Follow Me on Twitter

April, 2009
By : Nikhil
Tags : ,
Posted in : Web Developer

IS disabled=”true” and disabled=”false” the same?

This ones old school , but as usual it is my memory supplement …
So is disabled=”true” and disabled=”false” same?Yes
… Don’t believe, well! thats the way it is … here is some quick explanation…
“disabled” is an attribute of any form element/field and hence can accept any value by its nature.

As long as this attribute is present, the element will be disabled regardless of its value. for eg.
<input type=”text” value=”This is disabled” disabled>
<input type=”text” value=”This is disabled” disabled=”disabled”>
<input type=”text” value=”This is disabled” disabled=”true”>
<input type=”text” value=”This is disabled” disabled=”false”>

All of the above will make the this form field “DISABLED”.

Simply not providing the attribute “DISABLED” keeps the Field “ABLED” … like below

<input type=”text” value=”This is not disabled” />

Remember “Any value (or no value at all) of the disabled attribute, the browser will render it disabled” . To keep things clear in our minds W3C recommends that we use disabled=”disabled” in these situations.

This is difference though when we use this attribute in javascript …

document.form.element.disabled = true; //the element will be disabled
document.form.element.disabled = false; //the element will be enabled

The above arguments are also true for these attributes and elements :

  • checked (radio button and checkbox)
  • selected (option)
  • nowrap (td)

get ExpressingIT News by Email Subscribe to ExpressingIT by Email |  Follow Me on Twitter

March, 2009
By : Nikhil
Tags :
Posted in : HTML, JavasScript
1 Comment »

 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter