Instalar y personalizar fuentes de Google fonts

Instalar fuentes personalizadas gratis Instalar y personalizar fuentes de Google fonts

Las fuentes son esenciales si buscamos personalizar un blog por completo, por ello Google lanzó un servicio bajo el nombre Google fonts, el cual te permite Utilizar fuentes sin pagar por hosting. El dia de hoy aprenderemos a instalar fuentes Google, optimizarlas y personalizarlas.


Instalar fuentes

Entramos a la pagina principal de Google fonts y agregamos las fuentes que usaremos presionando el símbolo de adición "+" como se muestra en la siguiente captura:


seleccionar fuentes de google fonts

Sugiero no abusar de la cantidad de fuentes para obtener mayor rendimiento. Cada fuente seleccionada se nos incluirá en la parte inferior derecha:


fuentes seleccionadas roboto opensans

En la pestaña "Customize" podemos configurar el tipo de caracteres y grosor, mientras que en la pestaña "Embed" nos encontramos con los métodos para insertar las fuentes en el blog, en esa parte copiamos la etiqueta <link/>:


instalar fuentes de google fonts

Ahora vamos a incluir esa etiqueta en la cabecera del blog. Para ello pegamos el código debajo de <head>. En el caso de Blogger, es necesario cerrar la etiqueta link agregando una diagonal al final:


<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>

De esa forma evitamos el error en Blogger y nos permitirá guardar los cambios con el código que acabamos de agregar. Esto se debe a que en Blogger necesitas cerrar todas las etiquetas, ya que la plantilla utiliza xml estricto.


Por ultimo, para utilizar las fuentes recurrimos a la propiedad "font-family". Para entenderlo mejor, en el siguiente ejemplo he creado una clase de nombre font-opensans y he incluido la propiedad font-family con la fuente "Open Sans":


.font-opensans {
   font-family: 'Open Sans', sans-serif;
}

Ahora encerré el siguiente texto en una <p/> con la class font-opensans, lo que le proporcionará el estilo de fuente "Open Sans" gracias a mi codigo css:


<p class="font-opensans">Tutorial en zkreatios.</p>

También puedes agregar la propiedad font-family a cualquier regla en css. Por ejemplo, con el siguiente código css le indico al navegador que todo el cuerpo del blog obtendra la fuente Roboto:


body {
   font-family: 'Roboto', sans-serif;
}

Optimizar la entrega

S eres de los que busca optimizar el blog y lograr un buen puntaje en Google Page Speed, entonces las fuentes no las deberías cargar entre <head>, ya que el test te devolverá la siguiente sugerencia:


Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página

La cual podemos evitar si pegamos la etiqueta link arriba del cierre de </body>. Ten en cuenta que al hacer esto obtendrás FOUT, es decir, ese pequeño flash en donde la fuente desaparece y reaparece ya con el nuevo tipo letra. Esto puede llegar a ser molesto para tus usuarios, por lo evalua bien la posibilidad.


Reducir el peso

Puede que hayas decidido utilizar fuentes de google fonts solo para destacar una palabra o frase, como por ejemplo el nombre de tu blog. En esta situación puedes reducir el tamaño de la fuente si solo especificas en la url esa frase o texto en concreto mediante el parámetro text, agregandolo de la siguiente manera"


https://fonts.googleapis.com/css?family=Roboto&text=Daniel

El código anterior cargará solo las letras a, d, e, i y l ya que conforman el texto indicado. También esta permitido usar caracteres especiales UTF-8 y espacios en blanco en el mismo parámetro. He agregado el texto ¡Hola Daniel! en el siguiente ejemplo:


https://fonts.googleapis.com/css?family=Roboto&text=%C2%A1Hola%20Daniel!

Se que se lee extraño, pero lo que he hecho fue codificar los caracteres UTF-8 para usarlos en urls. Si deseas hacer lo mismo te proporciono la siguiente herramienta:


Codificar texto para url


Cargar estilos

Si hacemos lo de cargar fuentes sólo para texto especifico, también es probable que le queramos dar estilos. Google fonts también lo permite con una de sus funciones beta usando el parámetro effect de la siguiente manera:


https://fonts.googleapis.com/css?family=Source+Sans+Pro:900&effect=3d

Ahora para hacer uso de los efectos, se utiliza la class font-effect-{{effect}} en una etiqueta html, en donde {{effect}} se reemplaza por el nombre del efecto que en este caso es 3d, ejemplo:


<span class="font-effect-3d">Google</span>

Al texto también le podemos seguir añadiendo estilos, aparte de los estilos que añadirá google fonts para interpretar el efecto seleccionado. El codigo anterior se verá e la siguiente forma:


Google


También puedes concatenar efectos utilizando una barra vertical |. En este ejemplo estoy concatenando los efectos 3d y anaglyph


https://fonts.googleapis.com/css?family=Open+Sans&effect=3d|anaglyph

Si quieres saber más sobre esta función beta y también conocer la tabla con los efectos disponibles, te recomiendo leer la api de google fonts sobre effectos, así también podrás enterarte sobre actualizaciones.


Eso ha sido todo de momento amigos, cualquier duda, por más pequeña que sea, dejenla en los comentarios, yo los ayudaré. Si te ha servido este articulo no olvides compartirlo en las redes sociales, ayudara a mas personas y lo agradeceré mucho también. Que esten bien.