Instala, optimizar y personalizar fuentes de Google fonts

Instalar fuentes personalizadas gratis Instalar y personalizar fuentes de Google fonts

Las fuentes son esenciales para personalizar un blog por completo, y gracias a Google fonts tenemos la capacidad de Utilizar fuentes web gratuitamente sin pagar por hosting. El dia de hoy aprenderemos a instalar fuentes de Google, optimizarlas y personalizarlas.


Instalar fuentes

Vamos a visitar la pagina principal de Google fonts y agregamos todas las fuentes que vamos a necesitar presionando el símbolo de adición:


seleccionar fuentes de google fonts

Sugiero no abusar de la cantidad de fuentes para obtener mejor 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 letra y grosor y en "Embed" nos encontramos con los métodos para insertar fuentes en cualquier pagina, 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. Esto se debe a que Blogger utiliza xml estricto, por ello es obligatorio cerrar todas las etiquetas.


Usar fuentes

Para utilizar las fuentes recurrimos a la propiedad "font-family". En el siguiente ejemplo he creado una clase de nombre opensans y he incluido la propiedad font-family con la fuente "Open Sans":


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

Ahora solo bastaría con agregar la class opensans a una etiqueta html, lo que le proporcionará el estilo de fuente "Open Sans". Aquí un ejemplo:


<p class="opensans">Este texto esta en Open Sans :)</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 body obtendrá la fuente Roboto:


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

Optimizar la entrega

Si 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 con el nuevo tipo letra.


Si quieres evitar el FOUT y mejorar el rendimiento, copia el código css de Google fonts y pegalo directamente en tu blog. Luego en @font-face agrega la propiedad font-display. Por ejemplo:


@font-face{ 
   font-family: 'Roboto';
   font-display: auto;
   src: url('Roboto.woff') format('woff');
}

De esta forma el navegador evitará en lo posible el problema causado por el FOUT. Puedes leer mas en la documentación para desarrolladores de Google.


Reducir el peso

Puede que hayas decidido utilizar fuentes de Google fonts para destacar una palabra o frase. En este caso puedes reducir el tamaño de la fuente cargando solo las letras específicas con el parámetro text 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 está permitido usar caracteres especiales y espacios en blanco. 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 especiales 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-NAME en una etiqueta html, en donde NAME 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 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.

Quizás te interese