Conditionally styling @font-face

I'm using @font-face for some headers.

The replaced typeface is different in dimension开发者_开发问答 and overall character. When the switch happens, the old typeface's rules don't look so good.

Other than writing a conditional Javascript script, is there a way to have a set of CSS rules for @font-face fonts (if the browsers supports it) and CSS rules for the unreplaced default fonts?

There are no events that fire when this switch happens. So if you wanted to change line-height for instance, browsers don't give you any way to know when to do it.

However,

The new Google WebFont Loader provides CSS and javascript hooks so that you can change anything whenever that new @font-face font applies.

You might want to look at typekit - they provide events in their javascript library that help you control load events.