Menu

Personalizar fuente en app Ionic

fontgoogle - September 24, 2018 por Jheison Alzate
ionic3.9.2ionic-app-scripts3.2.0cordova-cli8.0.0ionic-cli4.1.2

Ionic nos provee de elegantes y hermosos componentes visuales; Pero en un mundo invadido por aplicaciones móviles, es importante tener un toque personal. Y uno de ellos, y quizas el más perceptible es la tipografia.

Realizar el cambio de la tipografia es un aspecto muy vistoso dentro de una aplicación Ionic, y que no implica gran trabajo para hacerlo.

Google fonts nos provee de una gran cantidad de tipografias que podemos utilizar de una manera libre.

Bien, ahora comenzaremos…

Paso 1: Iniciando el proyecto

Lo primero que haremos será iniciar un nuevo proyecto con ionic, vamos a nuestra terminal y ejecutamos:

$ionic start googleFonts blank --cordova

Ionic crea una carpeta con el nombre del proyecto, nuestro siguiente paso será ubicarnos dentro a la carpeta del proyecto desde nuestra terminal con:

cd googleFonts

Paso 2: Elegir la fuente.

Vamos a nuestro navegador y nos dirigimos a Google fonts y elegimos la fuente que deseemos, Yo eligiré la que se llama slabo.

Paso 3: Descargar la fuente.

Estando en el prewiev de la fuente, presionamos “Select this font”.

Esto Adiciona la fuente al paquete que se desea descargar:

Como se observa en la imagen anterios, Debemos seleccionar y pegar la url de la api de Google para esta fuente. En mi caso seria:

https://fonts.googleapis.com/css?family=Slabo+27px

Ahora abrimos una nueva pestaña del navegador y pegamos la url que acabamos de copiar. Al ir al enlace se nos muesta los @font-face que posee la fuente; Copiamos la url que deseamos descargar asi:

Posteriormente abrimos una nueva pestaña del navegador y pegamos la url que acabamos de copiar; Esto inicia la descarga del archivo que contiene la funte.

Para tener un poco de orden, creamos un directorio llamado fonts para guardar las fuentes en nuestro proyecto de Ionic. Lo podemos hacer en la ruta src/assets (tambien he renombrado el archivo para que sea más comodo de trabajar, lo he nombrado slabo.woff2)

Paso 4: Aplicar la fuente.

Ahora abrimos el proyecto de Ionic con nuetro editor preferido y modificamos el archivo src/app/app.scss para incluir la fuente:

@font-face{
    font-family: Slabo;
    src : url('../assets/fonts/slabo.woff2')
}

Con esto ya tenemos la fuente lista para utilizar, y para aplicarla solo debemos adicionar al mismo archivo

*{
    font-family: Slabo;
}

Lo anterior aplicaria la fuente a todo el contenido, pero si deseamos que solo se aplique a las etiquetas h1 seria asi:

h1{
    font-family: Slabo;
}

Ejecutando:

Ahora podemos observar los cambios digitando en la terminal:

ionic serve

Esperamos sea de utilidad este pequeño tuto :)

Ver código

¡Compártelo!

Artículos relacionados: