Detectar y listar fuentes en Javascript

Listar todas las fuentes del sistema con Javascript no es posible debido a temas de seguridad. Sin embargo, podemos saber si una cierta fuente existe en el sistema o no, gracias a fontdetect.js.

Su uso es simple, vamos a ver como se usa.

  1. Descarga el fichero fontdetect.js.
  2. Enlazarlo a nuestra página web:
    <script type="text/javascript" src="fontdetect.js">
    
  3. Crear instancia del objeto Detector:
    var detector = new Detector();
    
  4. Comprobar si la fuente existe o no con el método detect:
    if(detector.detect("Nombre_de_la_fuente")){
    	alert("¡La fuente existe!");
    }else{
    	alert("La fuente no existe");
    }
    

Un ejemplo de uso, en el cual se muestran en un SELECT las fuentes más comunes en Windows, Linux y MAC que existen en el sistema:

//--Lista de fuentes más comunes en Windows, Linux y MAC.
var systemFonts = ["Andale Mono", "Arial", "Arial Bold",
					"Arial Italic", "Arial Bold Italic", "Arial Black",
					"Comic Sans MS", "Comic Sans MS Bold", "Courier New",
					"Courier New Bold", "Courier New Italic", "Courier New Bold Italic",
					"Georgia", "Georgia Bold", "Georgia Italic",
					"Georgia Bold Italic", "Impact", "Lucida Console",
					"Lucida Sans Unicode", "Marlett", "Minion Web",
					"Symbol", "Times New Roman", "Times New Roman Bold",
					"Times New Roman Italic", "Times New Roman Bold Italic", "Tahoma",
					"Trebuchet MS", "Trebuchet MS Bold", "Trebuchet MS Italic",
					"Trebuchet MS Bold Italic", "Verdana", "Verdana Bold",
					"Verdana Italic", "Verdana Bold Italic", "Webdings",
					"American Typewriter", "Apple Chancery",
					"Brush Script","Baskerville", "Big Caslon",
					"Copperplate", "Gill Sans",
					"Futura", "Herculanum",
					"Lucida Grande", "Marker Felt", "Optima",
					"Palatino", "Times",
					"Osaka", "Papyrus",
					"Textile", "Zapf Dingbats", "Zapfino",
					"Techno", "Hoefler Text", "Skia",
					"Hoefler Text Ornaments", "Capitals", "Charcoal",
					"Gadget", "Sand",
					"Charter", "Clean", "Courier",
					"Fixed", "Helvetica", "Lucida",
					"Lucida bright", "Lucida Typewriter", "New Century Schoolbook",
					"Terminal","Utopia"];
//--Ordena el array alfabéticamente
systemFonts.sort();

var detector = new Detector();
var miSelect = document.getElementById("mi_select");
//Llena el select con las fuentes disponibles del array en el sistema.
for(var i = 0;i < systemFonts.length;i++){
	if(detector.detect(systemFonts[i])){
		miselect.innerHTML+="<option value='"+systemFonts[i]+"'>"+systemFonts[i]+"</option>";
	}
}

Documentación oficial

Deja un comentario