3

I've seen a couple methods of styling fallback fonts with JavaScript: one by Google & Typekit, for example, but I'm curious if there's any way of doing it without JavaScript.

For example, I'd like to use Arial height:10px; and if the user doesn't have Arial, I want to use Times height:24px; and if not that, I want to use a blue san-serif font. Okay, rather an absurd example, but it shows the general effect I'm going for.

Any help would be greatly appreciated!

DACrosby
  • 11,116
  • 3
  • 39
  • 51

2 Answers2

1

There’s no way to do it in CSS. If you find a way to do it with JavaScript, please share it. (There is a way to get a list of all installed fonts in JavaScript on IE, but I don’t know of any cross-browser way.)

Note that the page you refer to does not style fallback fonts; rather, it loads a font dynamically (and to the extent you can do that, fallback fonts lose significance).

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Yeah, that link is certainly not an ideal solution, but it would kind of work with a bit of tweaking (okay, probably a lot and cross browser would be questionable at best). – DACrosby Apr 19 '12 at 05:19
1

the javascript method just provides a @font-face stack and the right urls for every browser.

you can use this stack as follows:

font-family:your-google-font-name, arial, helvetica, freesans, sans-serif;

if the javascript is disabled in the browser, the fonts will fall back to arial, if arial is not installed, to hevetiva - and so on

different heights should not be the problem, because usually you have fallback fonts, that behave and look nearly the same as the original wanted font.

with javascript, there is no problem setting it unobstrusive.

make an html className with Jasvascript (i prefer jQuery here):

(function($){

  $(document).ready(function(){

    $('html').addClass('withJS');

  });

}(jQuery));

now you can set different styles with or without Javascript just in CSS.

to set different heights, depending on the actual font-family use (example on body tag)

var myFontFamily = $('body').css('fontFamily');

// Log to see whats the name you are working with:
console.log(myFontFamily);

if(myFontFamily == 'your-family-name-here'){
  $('body').css({fontSize: '20px' });
} else {
  // do something else...
}
Thomas Fellinger
  • 646
  • 3
  • 19
  • "Usually you have fallback fonts that behave and look nearly the same" This is the issue I'm trying to overcome: what if there aren't any fonts close enough, or if you do find one similar it's just different enough to break your site? So, in your example, I want to style helvetica differently than arial, differently than "your-google-font-name" depending on which the user sees. Your method, if I'm not mistaken, allows styling if JS is enable or isn't, but not per the fallback font used. Also, `.css("fontFamily")` returns the whole font tree: not only the used one. http://jsfiddle.net/U9uBS/ – DACrosby Apr 19 '12 at 22:17
  • you are right - i didnt found any solution for that. but maybe this article can clear out how it can be possible with modernizr http://webdesignerwall.com/tutorials/css3-font-face-design-guide - this is only a browser fallback - but for production systems i would go in this direction... – Thomas Fellinger May 08 '12 at 11:44