#2 - Subida y uso de tipografías en Bubble
En esta pequeña guía te voy a enseñar la peculiar manera que tienes en Bubble para subir y utilizar tipografías externas al editor.
¡Hola!
Primero que nada, quería agradecerte el tiempo que te has tomado para llegar hasta aquí y prestarme unos minutos de tu tiempo.
Si te interesa el contenido en español relacionado con Bubble y el no-code, te animo a suscribirte. Y si no te interesa... Pues te dejo un GIF de un gatito para que al menos la visita haya merecido la pena 😻
Hoy traigo una edición donde quiero explicarte una cosa en muy concreta; cómo utilizar tipografías personalizadas en tu aplicación de Bubble.
Aunque Bubble cuenta con un montón de fuentes por defecto, es posible que tu proyecto requiera de una fuente que no esté incluida. Por eso, es importante conocer de qué forma se pueden añadir.
Podría decirte que es muy intuitivo y que Bubble está más que preparado para añadir fuentes personalizadas... Pero no es así. Por eso, aquí tienes una pequeña guía para que tengas claro los pasos que hay que dar. Vas a alucinar.
Descarga una fuente
Lo primero que hay que hacer es descargar la fuente que queremos utilizar. Una de las páginas más famosas (y que recomiendo) para encontrar fuentes es Dafont. Seguro que aquí encuentras algo que se adapta a tus necesidades.
Para este ejemplo, he descargado la Gendis Script (que no es que me encante, pero es bastante llamativa y me va perfecta para el ejemplo).
Crea un uploader temporal
Ahora tienes que ir al editor de Bubble y añadir un elemento tipo File Uploader en alguna vista de tu aplicación. No te preocupes. En cuanto termines todo esto lo puedes eliminar.
Tras esto, deberás añadir un campo de texto que coja el valor dinámico del uploader que acabas de crear.
"Bueno, ¿pero no me estabas intentando enseñar a utilizar una tipografía personalizada? ¿Esto qué tiene que ver?" Pues... ¡Todo! Sigue leyendo que estamos cerca.Almacenar la fuente en Bubble
Cuando tengas el formulario preparado, entra en el modo previsualización de la aplicación y utiliza el uploader que has creado en el punto anterior para subir la fuente.
De esta forma, la fuente ya está guardada en los servidores de Bubble... ¡Pero aquí no termina la cosa! Verás que al subir el archivo, el texto que coge el valor dinámico del input cambia por la URL donde se ha alojado la fuente...
Algo tipo:
//s3.amazonaws.com/appforest_uf/f1482852801693x129632627358660100/Fuente.tffCópialo, abre un editor de texto plano y pégalo, porque lo vas a necesitar...
El CSS para que todo funcione
Ahora toca picar un poco de código (muy poco, no te preocupes) y crear un archivo CSS para que la aplicación reconozca la fuente.
El código es el siguiente:
@font-face {
font-family: 'NOMBRE_DE_LA_FUENTE';
src: url('https:URL_DEL_PASO_ANTERIOR');
}Varias cosas a tener en cuenta:
1. El valor del font-family (NOMBRE_DE_LA_FUENTE) puede ser el que tú quieras. Será el nombre que tendrá la fuente en el editor de Bubble.
2. El valor del src (URL_DEL_PASO_ANTERIOR) deberías tenerlo a mano porque es la URL que guardaste en el paso anterior. ¡Ah! Es importante añadir https: al principio del enlace.
Una vez tengamos este archivo, lo guardamos con la extensión .css y lo subimos a nuestra aplicación mediante el uploader.
Es muy importante copiar de nuevo la URL que se ha generado en el texto dinámico porque será necesaria para el último paso. ¡Estás muy cerca!
Llegamos al final
Bueno, parecía imposible pero ya solo te falta por hacer una cosa para terminar con esta travesía por el desierto. Navega a la pestaña General del apartado Settings y busca una sección que se llama Custom Fonts.
"¿CÓMO? QUE HABÍA UNA SECCIÓN PARA AÑADIR FUENTES PERSONALIZADAS Y ME HAS HECHO HACER TODO ESO" 😡
¡Pues sí! Porque, lamentablemente, es necesario seguir todo ese camino.
En esta sección deja añadir fuentes pero, para ello, es necesario el nombre de la fuente y un link a un archivo CSS... ¡y lo tenemos todo!
En el nombre de la fuente deberás escribir la que utilizaste en el archivo CSS. En este caso, yo la llamé Gendis.
Y con esto, nuestra fuente ya estará disponible para poder ser usada en toda la aplicación.
Fácil, ¿verdad?
Hasta aquí lo que tenía que contar. Espero que te haya resultado interesante y que te sirva de ayuda en tus aplicaciones de Bubble.
Si es así recuerda suscribirte para recibir en tu email el próximo artículo.
Si quieres darme cualquier feedback o comentar cualquier cosa, estaré encantado de leerte. Tengo los MD de Twitter abiertos para todo el mundo.
Bueno... y como no sé muy bien cómo despedir esto, he pensado en dejar una canción que me guste al final de cada post. Porque si te he descubierto algo nuevo de Bubble, quizá también te descubra algo nuevo en Spotify 🙃
¡Hasta la próxima!