list every font a user's browser can display

Question

Is there a way in javascript to obtain the names of all fonts (or font-families) that the browser can show? (I want to give the user a dropdown with a list of all available fonts, and allow the user to choose a font.) I'd prefer not to have to hardcode this list ahead of time or send it down from the server. (Intuitively, it seems like the browser should know what fonts it has and this should be exposed to javascript somehow.)

Answer 1

Yes there is! I'm so glad you asked this question because I now want to use this too.

http://www.lalit.org/lab/javascript-css-font-detect

Code from http://www.lalit.org/wordpress/wp-content/uploads/2008/05/fontdetect.js?ver=0.3

/**  * JavaScript code to detect available availability of a  * particular font in a browser using JavaScript and CSS.  *  * Author : Lalit Patel  * Website: http://www.lalit.org/lab/javascript-css-font-detect/  * License: Apache Software License 2.0  *          http://www.apache.org/licenses/LICENSE-2.0  * Version: 0.15 (21 Sep 2009)  *          Changed comparision font to default from sans-default-default,  *          as in FF3.0 font of child element didn't fallback  *          to parent element if the font is missing.  * Version: 0.2 (04 Mar 2012)  *          Comparing font against all the 3 generic font families ie,  *          'monospace', 'sans-serif' and 'sans'. If it doesn't match all 3  *          then that font is 100% not available in the system  * Version: 0.3 (24 Mar 2012)  *          Replaced sans with serif in the list of baseFonts  */  /**  * Usage: d = new Detector();  *        d.detect('font name');  */ var Detector = function() {     // a font will be compared against all the three default fonts.     // and if it doesn't match all 3 then that font is not available.     var baseFonts = ['monospace', 'sans-serif', 'serif'];      //we use m or w because these two characters take up the maximum width.     // And we use a LLi so that the same matching fonts can get separated     var testString = "mmmmmmmmmmlli";      //we test using 72px font size, we may use any size. I guess larger the better.     var testSize = '72px';      var h = document.getElementsByTagName("body")[0];      // create a SPAN in the document to get the width of the text we use to test     var s = document.createElement("span");     s.style.fontSize = testSize;     s.innerHTML = testString;     var defaultWidth = {};     var defaultHeight = {};     for (var index in baseFonts) {         //get the default width for the three base fonts         s.style.fontFamily = baseFonts[index];         h.appendChild(s);         defaultWidth[baseFonts[index]] = s.offsetWidth; //width for the default font         defaultHeight[baseFonts[index]] = s.offsetHeight; //height for the defualt font         h.removeChild(s);     }      function detect(font) {         var detected = false;         for (var index in baseFonts) {             s.style.fontFamily = font + ',' + baseFonts[index]; // name of the font along with the base font for fallback.             h.appendChild(s);             var matched = (s.offsetWidth != defaultWidth[baseFonts[index]] || s.offsetHeight != defaultHeight[baseFonts[index]]);             h.removeChild(s);             detected = detected || matched;         }         return detected;     }      this.detect = detect; }; 

Summary

How does it work?

This code works on the simple principle that each character appears differently in different fonts. So different fonts will take different width and height for the same string of characters of same font-size.