Home/ Questions/Q 3352050
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T01:58:59+00:00

I’m using one of the new google api fonts for a heading on a

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0