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

Question

Hi there,

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

You can't detect what font is used to render the text. The style is not changed according to what fonts are available.

What you could do is to measure the size of an element that contains text, and from that decuce what font might be used to render the text.

(Consider also that the user setting for font size also may affect how it's rendered.)

Answer 2

My solution is along the lines of what @Guffa suggests, but I would create a couple of different, maybe even hidden if that works in all browsers, containers with the same text. Use classes to set the font to the different combinations -- one with, one without Myriad Pro. Compare the heights of these two containers. If they are the same, then you know it's being rendered with the fallback fonts. In Safari 4, I get 16 and 15, respectively.

Example:

<style type="text/css">
    .myriad {
     font: 13px "Myriad Pro", "Helvetica", "Arial", "sans-serif";
            display: none;
    }
    .arial {
     font: 13px "Arial", "sans-serif";
            display: none;
    }
</style>
<script type="text/javascript" language="javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var mHeight = $('.myriad').height();
    var aHeight = $('.arial').height();

    alert( 'M: ' + mHeight + ' ' + 'A: ' + aHeight );
});
</script>

<p class="myriad">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla non purus et tortor rhoncus ultricies.
</p>
<p class="arial">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla non purus et tortor rhoncus ultricies.
</p>

Answer 3

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.

Answer 4

if($("body").css("font-family").indexOf("Arial") > -1 
   || $("body").css("font-family").indexOf("Helvetica") > -1) {
   $("body").css("font-size", "12px");
}

This works perfectly. I don't know why the guy who posted it chose to delete it..

Edit: NickFitz is correct as it indeed does not work. Silly me, got excited and overlooked the wrong changes it was making.

Answer 5

I'm searching for function to do this too... Is that possible? anyone to solve this problem?

Thanks in advance

Answer 6

The example from tvanfosson actually works. You'll need to use width instead of height though to compare the fonts. You'll also want to make the second font of the font list arial (or whatever fall back font you want to use). After that simply compare the widths, and if they are the same, you'll know that it's using arial in both cases:

<style type="text/css">
    .segoeUI
    {
        font: 13px "Segoe UI" , "Arial", "sans-serif";
        display: none;
    }
    .lucidaGrande
    {
        font: 13px "Lucida Grande" , "Arial", "sans-serif";
        display: none;
    }
    .arial
    {
        font: 13px "Arial" , "sans-serif";
        display: none;
    }
</style>

<script type="text/javascript">
    $(document).ready(function() {
        var sWidth = $('.segoeUI').width();
        var aWidth = $('.arial').width();
        var lWidth = $('.lucidaGrande').width();

        alert('Segoe: ' + sWidth + ' Arial: ' + aWidth + ' Lucida: ' + lWidth);
    });
</script>

I use this to optionally load a different style sheet that will use a different font size if segoe is not available. Reason being that segoe UI is too small at 11px and the other two fonts are too big at 12px. Since Segoe UI and Lucida Grande have better legibility, I try to use these first. By comparing them to arial, I know whether they are present on the system, thanks to tvanfosson.