@font-face gotchas – Paul Irish

May 5th, 2010 by @font-face gotchas – Paul Irish.

Over the past few months, I’ve collected a few worthwhile notes on @font-face that are worth reading over if you geek out about this stuff…

  • in Webkit (Chrome/Safari), applying font-weight:bold to faux-bold some @font-face’d text will not succeed. Same applies for font-style:italic. You can fix by adding the following to your @font-face declaration: (via doctype, crbug/31883 , crbug/35739 webk.it/34147 )
      /* these values are defaults in FF/Opera/IE but not webkit */
  • FF/Linux cannot serve webfonts from the file:// protocol. (Also, a tome on type quality with linux from Evan Martin)
  • TrueType format renders with a better quality than Opentype CFF. (sez Typekit) (fontsquirrel default )
  • In IE6-8, using createStyleSheet and then setting styleElem.styleSheet.cssText to a text value that includes a @font-face declaration going into will crash IE6-8. (src) Sigue leyendo

Font sizing with rem – Snook.ca

Jonathan Snook

Determining a unit of measurement to size our text can be a topic of heated debate, even in this day and age. Unfortunately, there are still various pros and cons that make the various techniques less desirable. It’s just a matter of which less-desirable is most desirable.

Sizing with rem

CSS3 introduces a few new units, including the rem unit, which stands for “root em”. If this hasn’t put you to sleep yet, then let’s look at how rem works.

The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

I’m defining a base font-size of 62.5% to have the convenience of sizing rems in a way that is similar to using px.

But what pitiful browser support do we have to worry about?

You might be surprised to find that browser support is surprisingly decent: Safari 5, Chrome, Firefox 3.6+, and even Internet Explorer 9 have support for this. The nice part is that IE9 supports resizing text when defined using rems. (Alas, poor Opera (up to 11.10, at least) hasn’t implemented rem units yet.)

What do we do for browsers that don’t support rem units? We can specify the fall-back using px, if you don’t mind users of older versions of Internet Explorer still being unable to resize the text (well, there’s still page zoom in IE7 and IE8). To do so, we specify the font-size using px units first and then define it again using rem units.

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

And voila, we now have consistent and predictable sizing in all browsers, and resizable text in the current versions of all major browsers.

vía Font sizing with rem – Snook.ca.

GLYPHICONS – library of precisely prepared monochromatic icons and symbols.

GLYPHICONS is a library of precisely prepared monochromatic icons and symbols, created with an emphasis on simplicity and easy orientation.

Perfectly sharp and in vectorsIcons are designed primarily for toolbars and navigation bars in OS X Lion, the application for iPhone, iPhone 4, iPad and other Apple devices.


vía GLYPHICONS – library of precisely prepared monochromatic icons and symbols..

font dragr | Drag and drop font testing

A revolutionary way to test custom fonts in the browser. No coding, no uploading, just drag and drop.

What is it?

font dragr allows you to easily test custom fonts, through the @font-face at-rule, without the need for any CSS coding or knowledge of CSS coding. All you need to do is drag and drop.

It alleviates the cumbersome nature of testing custom fonts and allows you to quickly and easily load in a font, play around with it and see if it’s the right one for you.

You can test on any website

Testing fonts within font dragr, while useful, won’t give the full look and feel of testing it on your own site. That’s where the font dragr bookmarklet comes in handy.

The bookmarklet allows you to test any font from your file system or any of the fonts found in the gallery. Same simple approach the web app has, with the added ability for testing on any website.

Font Dragr

vía font dragr | Drag and drop font testing.