css - 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-serif";

I want to change the font-size when Arial or Helvetica are selected. This is what I have in jQuery but it does not work:

$(function(){
  if ($("body").css("font") == "Arial") {
    $("body").css("font", "10px");
};
});

I appreciate your time, help and generosity :)

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.