8

I have used the CSS style sheet as font-family:arial,helvicta,sans-serif. When I checked it in browser, I don't know which font it is using from the font-family. I want to know the exact font used by the browser to display. In this case is the browser using Arial or Helvicta or sans-serif for the text I have displayed.

I have checked by putting this in Wordpad but it is taking my default system font.

7 Answers 7

4

You want the Font Finder add-on for Firefox:

https://addons.mozilla.org/en-US/firefox/addon/4415/

Lets you click on some text on a webpage and shows you the font information for that text - including which font has been selected from the family.

I've been using it for ages and it's very useful.

2

Here's a little HTML document I wrote which uses jQuery to generate a font-guessing script for use on your site:

<html>
<head>
<title>Font Guesser</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
/*
  If you encounter two fonts which have the same results
  try changing the fontTestString value
...
  NOTE: Ensure that there are no CSS directives which
  affect generic SPAN tags on your final site which are
  not also applied to this font guesser script generator
*/
var fontTestString = 'AABCCDEEFGGHIIJmmmmwwww';
function fontFamiliesTest( valString ) {
  $('#results').html( '&nbsp;' );
  $('#yourJavascript').html( '&nbsp;' );
  if ( ! valString ) {
    alert( 'Please enter a font-family declaration' );
    return false;
  } else {
    var fontFamilies = new Array();
    fontFamilies = valString.split(',');
    for ( var i = 0; i < fontFamilies.length; i++ ) {
      $('#results').append( '<h2>' + fontFamilies[i] + '</h2><span class="baseLine" style="font-family:' + fontFamilies[i] + ';">' + fontTestString + '</span>');
    }
    $('#yourJavascript').append('<h2>Your jQuery font test script:</h2><form><textarea id="jQ" style="width:100%;height:500px;"></textarea></form>');
    $('#jQ').append('&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"&gt;&lt;/script&gt;' );
    $('#jQ').append("\r\n" + '&lt;script type="text/javascript"&gt;' );
    $('#jQ').append("\r\n" + '  var usedFont = "";' );
    $('#jQ').append("\r\n" + '  $(document).ready( function() {');
    $('#jQ').append("\r\n" + '    $(\'body\').append(\'&lt;div id="testFontWrapper" style="position:absolute;bottom:0;height:1px;width:1px;"&gt;\');');
    $('#jQ').append("\r\n" + '    $(\'body\').append(\'&lt;span id="testFont" style="display:inline;font-size:100px;"&gt;' + fontTestString + '&lt;/span&gt;&lt;/div&gt;\');');
    $('.baseLine').each(function() {
      $('#jQ').append("\r\n" + '    if ( $(\'#testFont\').width() == ' + $(this).width() + ' ) usedFont = "' + $(this).css('font-family') + '";');
    });
    $('#jQ').append("\r\n" + '    alert(\'Used font appears to be:\' + usedFont );');
    $('#jQ').append("\r\n" + '  });');
    $('#jQ').append("\r\n" + '&lt;/script&gt;' );
  }
}
$(document).ready( function() {
  $('#testForm').click(function() {
    fontFamiliesTest( $('#fontFamily').val() );
  });
});
</script>
<style type="text/css">
.baseLine {
  font-size:100px !important;
}
</style>
</head>
<body>
<noscript>
<h1>Javascript Required</h1>
</noscript>
<p>Please enter the font-family declaration you would like to test fonts against:</p>
<form>
  <input type="text" name="fontFamily" id="fontFamily" value="'Comic Sans',Arial,monospace" />
  <input type="button" id="testForm" value="Go &raquo;" />
</form>
<div id="results">&nbsp;</div>
<div id="yourJavascript">&nbsp;</div>
</body>
</html>

The script uses the width characteristic of the fontTestString for each font at 100px height to determine which font is in use on the site.

1

There is no way to know. But it shouldn't matter. A properly designed will render properly and be usable regardless of the font the user's system uses. I wouldn't be worrying about this.

6
  • +1 This answer is technically correct, as there is no way to account for all user-specified CSS declarations - however, it is possible to script up a solution which works for 99% of the clients who view the material.
    – danlefree
    Nov 19, 2010 at 19:50
  • An example of which can be found here: lalit.org/lab/javascript-css-font-detect
    – John Conde
    Nov 19, 2010 at 20:10
  • Hrm... should've searched a bit more extensively before trying to reinvent the wheel...
    – danlefree
    Nov 19, 2010 at 20:20
  • I didn't realize you had posted a code snippet. Based on what that web page says you seem to be using the same technique as them so at the very least you've confirmed that technique is the way to go.
    – John Conde
    Nov 19, 2010 at 20:28
  • I think you guys are reading too much into the question. Pretty sure sreekanth just wants to know which font the browser picked when he viewed his own site. Nov 22, 2010 at 13:13
1

The way font-family works is that it will check the system for the first font on the list. If it is present, it will use that. If not, it will proceed to the next. So if you have the first font installed, it will be using that font. This is often called a font stack because you start at the top and work your way down if needed.

1

Use WhatFont, from the Chrome Web Store.

1

It turned out this is harder to achieve. Theoretically you can "capture" the actual custom font used by the device to substitute the generic serif/sans-serif/monospace keywords (which on an Android device are often Roboto, or other fonts), using Canvas and javascript. The next part is to compare the captured glyphset (a canvas-generated abcdefghijklmnopqrstuvwxyz... string), and using OCR compare the image to all OCR captures available in a font capture database. Optical character recognition is not available on JavaScript natively (without library) and most libraries are for detecting text with no regard to the font used. And with many fonts out there that look superficially identical with each other, performing the actual search-and-comparison may easily lead to false positives.

0

Save your webpage in HTML, then change the order of the fonts in the css and look at copies of the page in the browser.

1
  • 1
    This isn't a very helpful answer.
    – John Conde
    Dec 17, 2012 at 4:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.