8

I'm using one of the new google api fonts for a heading on a site. It's Yannone Kaffeesatz and is quite a condensed typeface.

My font stack is as follows:

    font-family: 'Yanone Kaffeesatz', arial, serif;

This is fine when the Yannone Kaffeesatz font renders, but if it doesn't, Arial is much more open and the heading spans over two lines.

My question is:

Is it possible to use a different font-size depending on which font is rendered on the page?

Ideally supported across a multitude of browsers.

Thanks

Tom

TDH
  • 567
  • 1
  • 6
  • 22
  • This is a dupe, but I can't find the original – Pekka Nov 07 '10 at 16:56
  • 1
    You can add server based user agent detection, and then serve a different page (or just css). IMO this is the only somewhat elegant solution. Google has a list of browsers and versions which are guaranteed to work. If it's mostly static text you could just use a PNG. –  Nov 07 '10 at 17:29
  • The original duplicate is probably this one: [Changing Body Font-Size based on Font-Family with jQuery](http://stackoverflow.com/questions/1271477/changing-body-font-size-based-on-font-family-with-jquery) – Lode Jun 17 '11 at 07:38

2 Answers2

4

Nope, this is not possible. It is complex and difficult to find out the actual used font from a font-family list even in JavaScript - it's impossible in pure CSS.

If you want to go the JavaScript route, here is a link to a clever method to detect the actual font-family in JavaScript.

Once you know the font used, it's easy to adjust element.style.letterSpacing to the required amount.

Community
  • 1
  • 1
Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • Thanks for your response. I had a feeling this was the case. I may have to re-think my stack. I could possibly do something with an overflow or maybe allow it to gracefully run over multiple lines. – TDH Nov 07 '10 at 16:58
0

One property which slightly changes font size depending on font is font-size-adjust. It's CSS3, only supported by Firefox.

But I don't think you want to tweak the size as much as aspect ratio, making Arial narrow. Squeezing a font (e.g. the letter spacing) becomes ugly quick. Instead, you should start with more condensed fonts in your stack.

http://pieroxy.net/blog/2014/10/11/the_quest_for_a_condensed_web_font.html studies condensed font options in detail. One of the trickier findings there is font-stretch: condensed which e.g. helps access e.g. Arial Narrow on windows (with Office).

Beni Cherniavsky-Paskin
  • 9,483
  • 2
  • 50
  • 58