Añadir fuentes de forma dinámica a nuestra web con Javascript

¡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.


Tu opinión es importante para mi, ¿Te ha resultado útil este artículo?

¿Eres programador/a?

En Pulpo están buscando nuevos talentos, envíales un email a developers@pulpoapp.com.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*