Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

share|improve this question

migrated from serverfault.com Nov 19 '10 at 12:15

This question came from our site for professional system and network administrators.

add comment

6 Answers 6

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
    
+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 '10 at 19:50
    
An example of which can be found here: lalit.org/lab/javascript-css-font-detect –  John Conde Nov 19 '10 at 20:10
    
Hrm... should've searched a bit more extensively before trying to reinvent the wheel... –  danlefree Nov 19 '10 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 '10 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. –  DisgruntledGoat Nov 22 '10 at 13:13
show 1 more comment

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.

share|improve this answer
add comment

Use WhatFont, from the Chrome Web Store.

share|improve this answer
add comment

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.

share|improve this answer
1  
This isn't a very helpful answer. –  John Conde Dec 17 '12 at 4:17
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.