@font-face fallback font control with css


I’m planning a re-design of my site and want to use the @font-face tag in my CSS. My concern is should @font-face files fail to load and my fallback font is enabled, how would I go about controlling the the fallback font’s CSS styling (i.e. font-size, line-height, etc). Instead of the fallback fonts inheriting the styling set for the @font-face font.

I’m aware of the js plugin"Modernizr", although as I understanding, the js detects whether the browser supports @font-face tag and is not enabled should the font not load.

Any suggestions/thoughts???



As far as I know, the best thing to do is make sure that your fallback fonts have similar features to the main font, so that the CSS styles will apply just as well to those as to the main font.