7

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 supported by all PC's and browsers. (my one windows 7 PC with IE 9 does not display it...) Now for a fallback font I use Arial, the problem is that arial is much larger than FlashDLig, so I want to specify a different font-size for it in the same class. Is it possible?

I know you can probably use font-size-adjust but it is only supported in Firefox.

Any suggestions? Javascript magic maybe?

Thanks

j08691
  • 204,283
  • 31
  • 260
  • 272
Dexter Schneider
  • 2,494
  • 7
  • 25
  • 28
  • May have a look at: http://stackoverflow.com/questions/7717734/using-non-standard-font-in-web-pages – Julio Jun 13 '12 at 20:53
  • 1
    But why don't you simply include that font on your website with `@font-face`? Even IE supports it from 5.5. – kapa Jun 13 '12 at 21:00
  • Hi bažmegakapa. Thanks, good idea. This website says that @font-face file types are only supported by IE9 and later...You say IE5.5 and up? http://www.stunningcss3.com/resources/fontface-file-types-browser-support.html – Dexter Schneider Jun 14 '12 at 08:57

2 Answers2

2

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;
}
Aidan Brumsickle
  • 649
  • 3
  • 5
  • Thank You. Appreciate. Any idea on how to implement this part of your solution: "and if so, change the class to the new one". I assume it has to be some Javascript function, and Javascript is not my strongsuit – Dexter Schneider Jun 14 '12 at 09:16
0

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! :)

JaggenSWE
  • 1,950
  • 2
  • 24
  • 41