¡Hola!

Vamos a ver cómo podemos añadir una tipografía/fuente de forma dinámica a nuestro sitio web.
¿Para qué nos sirve esto si ya podemos cargar las fuentes con CSS? Pues, en el caso que nos implica, el usuario tiene una sección de «Media/librería» o como queramos llamarlo… El usuario puede subir fuentes y queremos generar un preview de estas.

Para «cargar» las fuentes al documento y poder mostrar el preview de estas meteríamos el siguiente bloque de código en un bucle (Recibiremos de forma asíncrona la url y el nombre del archivo).

var nueva_fuente = new FontFace('Nombre de la Fuente', 'url(fonts/nombre-de-la-fuente.woff)');
nueva_fuente.load().then(function(fuente_cargada) {
	document.fonts.add(fuente_cargada);
}).catch(function(error) {
	// Oops, algo ha salido mal
});

Con esto ya tendríamos la/s fuente/s cargada/s en el documento.

Ahora podríamos usar la fuente en el elemento que queramos con:

.selector{
    font-family: "Nombre de la Fuente", Arial;
}

El resultado final sería algo así:

BONUS

La función entera de para generar el html necesario y así renderizar el «card» podría ser:

function renderFileObject(oObject){
 
    var fontUrl = getDownloadLink(oObject)
    var nueva_fuente = new FontFace(oObject.name, 'url(' + fontUrl + ')');
    nueva_fuente.load().then(function(fuente_cargada) {
        document.fonts.add(fuente_cargada);
    }).catch(function(error) {
        console.error('Error al cargar: ' + oObject.name)
    }); 

    var html = ''
    html += '
'
    html += '    
'
    html += '       
'    
    html += '           
'
    html += 'AaBb'
    html += '           
'
    html += '       
'
    html += '        
'
    html += '            
'
    html += '                
'
    html += '                        
' + oObject.name + '
'
    html += '                
'
    html += '            
'
    html += '        
'
    html += '    
'
    html += '
'
    return html;
}

Ejecutamos esta función en nuestro recorriendo nuestro Array de fuentes y elegimos donde pintar el resultado.