After the deep and thorough studies by Steve Souders on web fonts, there's surely a lot of concern among web developers about web fonts and their impact on page performance. However, such a concern should not be taken too seriously, because the interesting results reported by Steve concern only web fonts included via the CSS @font-face rule. In short, Steve found out that this kind of font embedding creates a peculiar effect on web pages: fonts are first rendered without the specified web font and only later the font is completely loaded. This actually slows down page loading.

Read more »

Check out this SlideShare Presentation:

CSS @font-face : Personalized fonts

View more presentations from Yves Van Goethem.

Google Web Fonts are a useful feature that can actually enhance the visual appealing of your web pages. First of all, you need to select a font from the Font Directory. Then, just click on Embed to get the code. For example, if you want to use the Yanone Kaffeesatz font, you get a code like this:

<link href=' http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>

The URL contained in the above link element actually retrieves the following style sheet:

@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 400;
  src: local('Yanone Kaffeesatz'), url('http://themes.googleusercontent.com/font?kit=YDAoLskQQ5MOAgvHUQCcLdZ76ZYKVLHIjRQjrp3kYFc') format('truetype');
}

Of course you can use these styles with an @import rule, like so:

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

The above declaration must be put at the very beginning of your CSS file. After this, you can use the downloaded font this way:

h1 { font-family: 'Yanone Kaffeesatz', Arial, sans-serif; }

Interesting interview.

Roberto Scano is the boss of IWA Italy and one of my colleagues and friends. Roberto takes seminars on a regular basis. The following is taken from SMAU 2008 (in Italian).

There's been a lot of talking on css-discuss and www-style about the newly supported CSS3 feature related to web fonts. Through the @font-face statement, now authors can insert and display uncommon types of fonts in their documents.

This means that all the CSS replacement techniques can be avoided by using this brand new technique. Despite the obvious enthusiasm for the adoption of a new feature, there's an issue that cannot be overlooked: if I can insert any type of fonts, what about the overall legibility of web documents?

In short, if accessibility really matters, we should avoid some types of fonts that, for example, are difficult to read for low-vision users or, alternatively, provide a different layout with more common font faces. I'm not saying that web fonts are evil, but that we should use them carefully, avoiding an overuse that might be harmful for users with disabilities. For example, we could use web fonts only on headings and not on the main text of our page, provided that the font of our choice is legible.