1

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?

Community
  • 1
  • 1
Primoz Rome
  • 10,379
  • 17
  • 76
  • 108
  • Well, you could check it with javascript and load the extra style if the property is not supported, but I guess that's not an answer you'd prefer? – primavera133 May 29 '12 at 09:31

2 Answers2

1

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.

Luca
  • 9,259
  • 5
  • 46
  • 59
  • Yeah but don't want to go this way... UPDATE: well on the second thought this is not exactly such a bad solution. – Primoz Rome May 29 '12 at 09:51
  • it is probably the only feasible one, but I agree it's not perfect as it does not work with JS off. – Luca May 29 '12 at 15:56
0

I came accross a meaningful solution when I was searching for something else that allows you to specify the browser specific css using .ie9 .yourclass .chrome .yourclass etc in your css file. It uses a small javascript file that can be loaded in the _layout file or masterpage file..

That link is Here

Skindeep2366
  • 1,549
  • 3
  • 41
  • 68