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

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:

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:

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?

Deja un comentario

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

*