Home/ Questions/Q 8007795
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T17:56:28+00:00

I am having problem defining CSS rules for browsers that do not support font-stretch

  • 0

I am having problem defining CSS rules for browsers that do not support font-stretch property (webkit, etc)…

THE PROBLEM:
I am using Helvetica Neue font (CSS setup from Twitter Bootstrap) and I use font-stretch:condensed; property on some of my CSS rules. Unfortunately I have soon figured out that this property is not supported in Webkit and some other browser, and I began searching for a fallback rule.

One solution found here for webkit browser is to use post script font name font-family: "HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;. But it is really only Mac solution. Windows browsers will not have this font and will fallback to non stretched font.

So the only real solution for using condensed font is to import a font from a site like myfonts.com, google webfonts etc… Since I am looking for a FREE solution I found some FREE fonts that come close to Helvetica Neue Bold Condensed. I am now wondering is there a way to specify a CSS rule only target the browsers that do not support font-stretch property?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The only way I can think of, is javascript feature detection:

    if (document.createElement("detect").style.fontStretch === "") {  
    document.getElementsByTagName("html")[0].className += " fontstretch";  
}

    add this in your <head> tag.

    this will add a fontstretch class to your html tag so you could:

    1. set the @font-face rule as a standard – it will be the fallback for browsers that do not support font-stretch

    2. use .fontstretch as a css hook to set the font-family back to Helvetica Neue and apply font-stretch as well.

    • 0