Changing Body Font-Size based on Font-Family with jQuery

Question

I\'m trying to use Myriad Pro as my primary font with Arial and such as a fall-back like so:

font: 13px \"Myriad Pro\", \"Helvetica\", \"Arial\", \"sans-seri         


        

Answer 1

JavaScript doesn't have an officially supported way of detecting fonts, but this library is a decent workaround: http://www.lalit.org/lab/javascript-css-font-detect

Using this detector, you can then use:

$(function(){
  var fontDetector = new Detector();
  if(fontDetector.test('Arial')){
    $('body').css('font-size', '10px');
  }
});

Also note that you should only change the font-size property. If you change the font property, you overwrite both your font size and your font families.