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

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 :)

Solution 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.

Solution 2:

Everything I've read on this page so far terrifies me! I'm concerned about flickering text sizes, strange browser behavior, misalignment all over the place due to race conditions with other sizing of elements based on sizes.

The underlying problem is that different fonts have different sizes even for the same point size - so you need to understand how different fonts behave to see if they're within acceptable tolerances.

i came up with the followig quick and dirty font tester. Just stick it at the top of your webpage inside the <BODY> tag and click a font name to switch to that font. Test it on Mac + PC + iPad and whichever browsers you need to support. Just remove the fonts from your font list that dramatically break your design.

Remember if you have portions of your page that are more critical, try using Arial for those sections.

<ul id="fontList" style="position:absolute; top: 500px; color: red">
    <li>Segoe UI Medium</li>
    <li>Segoe UI</li>
    <li>Trebuchet MS</li>
    <li>Trebuchet</li>
    <li>Lucida Grande</li>
    <li>Tahoma</li>
    <li>Arial</li>
    <li>Sans-Serif</li>
</ul>


<script>
    $('#fontList li').assertNonEmpty().click(function () {
        $('body').css('font-family', $(this).html());
    });
</script>

Test it out on JSFiddle.com <-- click on the red font names in the bottom right box

Solution 3:

a very simple jquery function :

function changeFont(element, fontFamily, fontSize)
{
    var hh = $(element).height();
    $(element).css("font-family", fontFamily);
    if ($(element).height() != hh)
        $(element).css("font-size", fontSize);
}

sample :

changeFont("body", "B Koodak, B Nazanin, Tahoma", "13pt");

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

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts