Skip to content

Instantly share code, notes, and snippets.

@metude
Created December 20, 2012 17:31
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save metude/4347001 to your computer and use it in GitHub Desktop.
Save metude/4347001 to your computer and use it in GitHub Desktop.
Simple Font Detect with JS (source: http://my.opera.com/QuHno/ )
/*********************** Fontdetect - The font stuff - START ********************/
var font = document.getElementById('font'); // The hidden input field
var output = document.getElementById('output'); // the detected font results go here
var fontList =''; // the result
var computed = window.getComputedStyle(output, null); // the actual style of the tested element
// test against the 508 most common installed fonts of this array. You can enter your own font-family names here
var theFonts = ['"Lucida Sans Unicode"', '"Arial Unicode MS"', 'Helvetica', '"Lucida Grande"', '"Lucida Sans"', '"Microsoft Sans Serif"', '"Times New Roman"', '"Trebuchet MS"', '"Courier New"', '"Comic Sans MS"', 'Georgia', '"Lucida Console"', 'Verdana', '"URW Chancery L"', 'Arial', '"URW Gothic L"', '"URW Bookman L"', '"Nimbus Roman No9 L"', '"MV Boli"', '"DejaVu Sans Mono"', '"DejaVu Serif"', 'Tunga', '"Arial Narrow"', 'Impact', '"Arial Black"', '"Arial Rounded MT Bold"', '"Andale Mono"', 'Tahoma', '"Hoefler Text"', 'Zapfino', 'Papyrus', '"Big Caslon"', 'Copperplate', 'Kartika', '"Brush Script MT"', 'Herculanum', '"Hiragino Kaku Gothic ProN"', '"Liberation Serif"', '"Liberation Mono"', 'Calibri', 'Cambria', '"Liberation Sans"', 'Candara', 'Corbel', 'Consolas', 'Constantia', '"Hiragino Maru Gothic ProN"', '"Hiragino Kaku Gothic StdN"', '"Century Gothic"', 'FreeSans', 'Garamond', '"Book Antiqua"', '"Bookman Old Style"', 'FreeMono', '"Segoe UI"', 'Kokonor', 'Kailasa', '"Lucida Bright"', '"MS Reference Sans Serif"', 'PCMyungjo', 'PilGi', '"Heiti TC"', 'HeadLineA', 'Menlo', '"Meiryo UI"', 'Chalkduster', 'Mistral', '"Juice ITC"', '"Malgun Gothic"', 'MingLiU_HKSCS', 'MingLiU_HKSCS-ExtB', 'MingLiU-ExtB', 'PMingLiU-ExtB', 'MoolBoran', '"MS Mincho"', '"Curlz MT"', '"Franklin Gothic Demi Cond"', '"Blackadder ITC"', '"MS PMincho"', 'Casual', '"Segoe UI Light"', 'PMingLiU', '"Segoe Print"', '"MS Gothic"', '"Segoe UI Semibold"', '"Lucida Calligraphy"', 'Harrington', '"Iskoola Pota"', '"MS UI Gothic"', '"Viner Hand ITC"', 'Onyx', '"Mongolian Baiti"', '"Wide Latin"', 'Euphemia', 'Gulim', '"Microsoft Yi Baiti"', 'Nyala', 'Playbill', 'BatangChe', 'Gungsuh', 'GungsuhChe', '"Snap ITC"', 'DaunPenh', 'Dotum', 'UnBatang', 'Gabriola', '"High Tower Text"', '"Niagara Engraved"', 'Sawasdee', 'SimHei', 'Garuda', 'Loma', '"Tlwg Typist"', '"Gill Sans MT"', '"Century Schoolbook"', '"Monotype Corsiva"', '"Script MT Bold"', '"Goudy Old Style"', '"Imprint MT Shadow"', 'Braggadocio', '"News Gothic MT"', '"Rockwell Condensed"', 'Castellar', 'Forte', '"Agency FB"', '"Rage Italic"', '"Colonna MT"', '"Tw Cen MT Condensed"', '"Britannic Bold"', '"Calisto MT"', 'Desdemona', '"Gloucester MT Extra Condensed"', '"Footlight MT Light"', '"Matura MT Script Capitals"', '"Perpetua Titling MT"', '"Abadi MT Condensed Light"', '"Kino MT"', '"Adobe Song Std"', '"Bodoni MT Condensed"', '"Adobe Kaiti Std"', '"Lucida Sans Typewriter"', '"Adobe Gothic Std"', '"Bitstream Vera Sans"', 'Gentium', 'Utopia', 'Eurostile', '"Luxi Mono"', '"Matisse ITC"', 'Electron', 'Nice', '"Bitstream Vera Sans Mono"', 'Courier', '"Domestic Manners"', 'Dustismo', '"MgOpen Modata"', '"MgOpen Moderna"', '"MgOpen Canonica"', '"MgOpen Cosmetica"', '"AR PL UMing CN"', '"AR PL UMing HK"', '"AR PL UMing TW"', '"AR PL UMing TW MBE"', '"Staccato222 BT"', '"Penguin Attack"', 'Balker', '"Marked Fool"', '"Bitstream Vera Sans"', 'Univers', 'Junkyard', '"Linux Libertine O"', '"Bitstream Vera Serif"', '"Broadway BT"', '"Square721 BT"', '"ParkAvenue BT"', '"MisterEarl BT"', '"Calligraph421 BT"', '"DejaVu LGC Sans Mono"', '"Cataneo BT"', '"Rage Italic LET"', '"La Bamba LET"', '"Blackletter686 BT"', '"Ruach LET"', '"John Handy LET"', '"DejaVu LGC Sans"', '"DejaVu LGC Sans Condensed"', '"DejaVu LGC Sans Light"', '"DejaVu LGC Serif"', '"DejaVu LGC Serif Condensed"', 'Isabella', '"Linux Libertine"', '"Scruff LET"', '"Westwood LET"', 'AlArabiya', '"Milano LET"', '"Tiranti Solid LET"', '"One Stroke Script LET"', '"Orange LET"', '"Smudger LET"', '"Victorian LET"', '"Academy Engraved LET"', '"Mekanik LET"', '"Odessa LET"', '"Pump Demi Bold LET"', 'Inconsolata', '"OldDreadfulNo7 BT"', '"University Roman LET"', '"Highlight LET"', '"Nimbus Sans L Condensed"', 'AlBattar', 'AlHor', 'AlManzomah', 'Arab', 'Dimnah', 'Furat', 'Granada', 'Graph', 'Hani', 'Hor', 'Interstate', 'Japan', 'Jet', 'Khalid', 'Mashq', 'Mashq-Bold', 'Nagham', 'Ouhod-Bold', 'Rehan', 'Shado', '"Myriad Std"', 'Charcoal', 'Gadget', 'Avenir', 'Techno', 'Delicious', '"Bitstream Vera Serif"', '"Baby Kruffy"', '"Berthold Akzidenz Grotesk BE"', '"New York"', 'DINSchrift', '"ITC Franklin Gothic"', '"Verdana Ref"', '"Helvetica Narrow"', '"Caflisch Script Pro"', 'Ubuntu', '"Alba Super"', 'Caslon', '"Kabel Ult BT"', 'AlMateen-Bold', 'AlMohanad', 'AlMothnna-Bold', 'Andy', '"Bernhard Modern Std"', '"Beesknees ITC"', '"New Century Schoolbook"', 'HelveticaNeue', 'Frosty', 'GENUINE', 'OCRB', 'Freshbot', '"Placard Condensed"', 'Croobie', '"Abadi MT Condensed Extra Bold"', 'Jokewood', '"Pepita MT"', '"Georgia Ref"', 'Poornut', 'Monaco', 'Berkeley', 'Bookman', '"Franklin Gothic"', '"Ryo Display Std"', 'Aachen', '"Adobe Sans MM"', '"Helvetica Neue"', '"Apple Chancery"', 'Belwe', '"Zapf Chancery"', 'Ubuntu-Title', '"Minion Web"', '"URW Grotesk T"', '"Linux Biolinum O"', 'Fixed', 'Terminal', 'Textile', 'Times', '"Franklin Gothic Medium"', '"Nimbus Sans L"', '"URW Palladio L"', '"Nimbus Mono L"', 'Sylfaen', '"DejaVu Sans"', '"Estrangelo Edessa"', 'Gautami', 'Mangal', 'Raavi', 'Latha', 'Shruti', '"Gill Sans"', 'Futura', '"DejaVu Sans Light"', '"Marker Felt"', 'Baskerville', 'Skia', '"American Typewriter"', 'Didot', '"DejaVu Sans Condensed"', '"DejaVu Serif Condensed"', '"Hiragino Mincho ProN"', '"Bitstream Charter"', 'Palatino', 'FreeSerif', '"Courier 10 Pitch"', '"Hiragino Sans GB"', '"Heiti SC"', '"Microsoft JhengHei"', '"Microsoft YaHei"', 'SimSun-ExtB', 'GungSeo', '"Freestyle Script"', '"Microsoft Uighur"', 'Gisha', 'Leelawadee', 'DFKai-SB', 'Jokerman', '"French Script MT"', '"Bradley Hand ITC"', 'KaiTi', 'FangSong', 'Vivaldi', 'UnDotum', '"Lohit Punjabi"', '"Segoe Script"', '"Lohit Hindi"', 'Kinnari', 'TlwgMono', 'Umpush', 'utkal', '"Bodoni MT Poster Compressed"', 'Mallige', 'Vemana2000', 'KacstOne', '"Berlin Sans FB Demi"', '"Phetsarath OT"', '"Tlwg Typo"', '"Lucida Fax"', '"Lucida Handwriting"', 'Haettenschweiler', '"Gill Sans MT Condensed"', '"Gill Sans Ultra Bold"', '"Gill Sans MT Ext Condensed Bold"', '"Palace Script MT"', '"Eras Bold ITC"', '"Eras Medium ITC"', '"Goudy Stout"', '"Gill Sans Ultra Bold Condensed"', '"Tw Cen MT"', 'Gigi', '"Tw Cen MT Condensed Extra Bold"', '"Adobe Ming Std"', '"Adobe Myungjo Std"', '"Bodoni MT"', '"Bodoni MT Black"', '"Adobe Fangsong Std"', '"Adobe Heiti Std"', '"Adobe Fan Heiti Std"', '"Quixley LET"', '"Jokerman LET"', '"News Gothic Std"', 'Cortoba', 'Sand', 'Alba', '"Alba Matter"', 'Bembo', 'Chick', '"Adobe Garamond"', '"Minion Std"', 'GlooGun', '"Weltron Urban"', 'Sabon', '"MS Reference Serif"', '"Abadi MT Condensed"', '"Ubuntu Light"', '"Runic MT Condensed"', 'Optima', '"Bickley Script"', 'Archer', 'BauerBodoni', '"Base 02"', '"ITC Century"', 'Porcelain', 'Geneva', 'AkzidenzGrotesk', '"Times CY"', 'CAMPBELL', '"DomBold BT"', '"Fine Hand"', '"Mercurius Script MT Bold"', 'Chicago', 'MARKETPRO', 'Kaufmann', 'FIRSTHOME', 'Monotype.com', '"DecoType Naskh"', '"The Sans-"', 'BudHand', '"URW Antiqua T"', '"Palatino Linotype"', '"Century Schoolbook L"', 'Vrinda', '"Cambria Math"', '"Tempus Sans ITC"', '"Kristen ITC"', '"Microsoft Himalaya"', 'Batang', '"Lohit Bengali"', '"Lohit Tamil"', '"Lohit Gujarati"', 'Waree', 'SimSun', 'Pristina', '"Franklin Gothic Book"', '"Copperplate Gothic Light"', '"Copperplate Gothic Bold"', '"Maiandra GD"', '"Eras Demi ITC"', '"Franklin Gothic Demi"', '"OCR A Extended"', 'Perpetua', '"Eras Light ITC"', '"Felix Titling"', 'Rockwell', '"Edwardian Script ITC"', '"Franklin Gothic Medium Cond"', '"MS PGothic"', '"Rockwell Extra Bold"', '"Engravers MT"', '"Franklin Gothic Heavy"', '"Cooper Black"', 'GulimChe', '"Old English Text MT"', 'Kalinga', '"Baskerville Old Face"', '"Bauhaus 93"', 'Algerian', 'Broadway', 'DotumChe', 'DokChampa', '"Kunstler Script"', 'MingLiU', '"Vladimir Script"', '"Arabic Typesetting"', '"Bernard MT Condensed"', '"Harlow Solid Italic"', 'Chiller', 'NSimSun', '"Informal Roman"', 'Stencil', '"Bell MT"', 'Ravie', '"Berlin Sans FB"', 'Centaur', '"Californian FB"', '"Mukti Narrow"', 'Purisa', '"Niagara Solid"', '"Showcard Gothic"', 'Norasi', 'TlwgTypewriter', 'Magneto', 'Aparajita', 'Rachana', 'Capitals', '"Adobe Arabic"', '"Adobe Hebrew"', '"Kozuka Gothic Pr6N"', '"Kozuka Mincho Pr6N"', 'Metal', '"Luxi Sans"', '"Luxi Serif"', 'Gotham', 'Nada', 'Ostorah', 'Petra', 'Rasheeq-Bold', 'Salem', 'Sharjah', 'Tarablus', 'Tholoth', '"Linux Libertine C"', 'TradeGothic', '"Hypatia Sans Pro"', '"Frutiger LT Std"', 'Formata', '"ITC Franklin Gothic Std"', 'Pussycat', '"Jenkins v2.0"', 'Fat', '"Andale Mono IPA"', 'RotisSemiSans', 'Shelley', '"Courier Std"', '"Cronos Pro"', '"A Charming Font"', 'Champignon', '"Apple Casual"', '"Mead Bold"', '"Avant Garde"', 'Ahem','"this is no font"'];
// do the font stuff if clicked
function thefont(e){
var theSelectedFont = e.style.fontFamily;
font.value = theSelectedFont;
theDiv.style.fontFamily = theSelectedFont;
widget.preferences.font = theSelectedFont.replace(/\"/gi,'');
var reset = output.querySelectorAll('p.installed');
for(var i=0,theReset;theReset=reset[i++];){
theReset.style.background="#286699";
};
e.style.background = '#3c99e5';
widget.preferences.scroll = output.scrollTop;
};
/* check if the font is installed
a fallback with Comic Sans Serif instead of tlm should be included when run on another browser than Opera because they can't detect the special crafted tlm web font
*/
/*
// fallback,
var theWidth =0, theHeight =0;
//*/
for (var i=0,fonts; fonts = theFonts[i++];)
{
//*
// save the original style
var saved = (output.style.getPropertyValue('font-family') !== undefined) ? output.style.getPropertyValue('font-family') : '';
//*/
output.style.fontFamily = fonts + ',tlm';
/*
// this should be enough, but you could decide to set several fonts at a time and then check for the font that is really used by the browser
if (computed.getPropertyValue("font-family") === fonts)
//for that reason we use indexOf(), which a little bit more costly, but safer.
//*/
if (fonts.indexOf(computed.getPropertyValue("font-family")) > -1){
fontList += "<p class='installed' style='font-family:"+fonts+"'>"+ computed.getPropertyValue("font-family").replace(/\"/gi,'') +"</p>\r\n";
}
/*
// fallback
// if getPropertyValue for font-family should fail for security or privacy reasons (maybe prevent fingerprinting)
if ((computed.getPropertyValue("font-family") === fonts) && ((computed.getPropertyValue("width") !== theWidth) || (computed.getPropertyValue("height") !== theHeight)))
// OR
if ((computed.getPropertyValue("width") !== theWidth) || (computed.getPropertyValue("height") !== theHeight))
{
fontList += "<p class='installed' style='font-family:"+fonts+"'>"+ fonts.replace(/\"/gi,'') +"</p>\r\n";
}
theWidth = computed.getPropertyValue("width");
theHeight = computed.getPropertyValue("height");
//*/
output.style.fontFamily = saved;
}
// insert the paragraphs with the fonts into the div
output.innerHTML = fontList;
// if there are preferences, highlight that font
var activeFontColor = output.querySelectorAll('p.installed')
for(var i=0,theReset;theReset = activeFontColor[i++];){
if(widget.preferences.font === theReset.style.fontFamily.replace(/\"/gi,'')){
theReset.style.background="#3c99e5";
}
};
output.scrollTop = widget.preferences.scroll;
theDiv.style.fontFamily = widget.preferences.font;
// attach Event listeners to the paragraphs
var installed = output.querySelectorAll('p[class=installed]');
for(var i=0, toChange; toChange = installed[i++];)
{
toChange.addEventListener('click',function(){
thefont(this);
}, false);
};
/*********************** Fontdetect - The font stuff - END **********************/
@metude
Copy link
Author

metude commented Dec 20, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment