Specifying different font-sizes for different font-families

Question

Is there a way to specify a different font-size for a different font-family. The font I want to use(for purposes of product branding) is a somewhat rare font (FlashDLig) not

Answer 1

I would recommend defaulting to Arial, and then create a second class that uses a @font-face declared for your font. Then I think you'd have to use Javascript to test whether the font was able to load (maybe check derived style of some element you put off-screen), and if so, change the class to the new one. The reason I'd do it that way instead of starting with your custom font has to do with the idea of progressive enhancement.

Here's one way to change the class in Javascript:

if (fontLoaded()) {
    document.body.className += " fontLoaded";
}

And then in your CSS:

@font-face {
    ... /* declare font face */
}
body {
    font-family: "Arial";
    font-size: 0.8em;
}
body.fontLoaded {
    font-family: "FlashDLig";
    font-size: 1em;
}

Answer 2

Have a look at the following code examples:

http://www.lalit.org/lab/javascript-css-font-detect/

and

http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/

And adjust your stylesheet from the result of the detection.

I've used these some time ago with good results.

Good luck! :)