[jQuery] How to check for specified fonts

[EdMartin]

Back in the day, using HTML 4.01, I could check for the presence of a
specified font (different from the default monospace font) by placing
a DIV containing a couple of SPANs, absolutely positioned off-screen
using this kind of arrangement (I'm spreading the tags because I don't
know how this forum treats HTML tags):

HTML:
< div id="tester" >
  < span id="test" >< font id="testfont" face="monospace" >Some well-
chosen sample text< /font >< /span >
  < span id="ctrl" >Some well-chosen sample text< /span >
< /div >

CSS:
#tester { position:absolute; top:-5000px; }
#test, #ctrl { font-size: 30px; }
#ctrl { font-family: monospace; }

and then using a script method like this:

JavaScript:
function IsItThere( fontname )
{
  document.getElementById( "testfont" ).face = fontname + ",
monospace";
  var test = document.getElementById( "test" );
  var ctrl = document.getElementById( "ctrl" );
  return ( test.offsetWidth != ctrl.offsetWidth );
}

Of course, that doesn't work using XHTML because the < font > tag
isn't valid. I thought jQuery could come to the rescue, with a minor
revision like this:

HTML:
< div id="tester" >
  < span id="test" style="font-family:monospace;" >Some well-chosen
sample text< /span >
  < span id="ctrl" >Some well-chosen sample text< /span >
< /div >

Same CSS as before.

JavaScript:
function IsItThere( fontname )
{
  $("#test").css("font-family", fontname + ", monospace" );
  return ( $("#test").width() != $("#ctrl").width() );
}

But it doesn't work. The #test and #ctrl stubbornly report the same
width all the time, regardless of the font-family setting.

Does anyone have an alternative suggestion?

Thanks in advance.