Cómo usar fuentes de forma local con @font-face (CSS)

Este no va a ser «otro vídeo» más hablando sobre fuentes. Vamos a utilizar fuentes de Google Fonts, pero esta vez cargaremos las fuentes tipográficas de forma local, utilizando la regla @font-face de CSS.

Esta es otra manera de utilizar fuentes de Google en CSS y es buen método para optimizar el rendimiento de nuestra página. Y para que cargue un poco más deprisa.

Y si lo que quieres es instalar cualquier fuente en tu ordenador te dejo por aquí el vídeo donde explico cómo instalar fuentes de Google Fonts en el PC.

Y ahora, vamos al lío. Vamos a utilizar fuentes de forma local con la regla @font-face.

Regla de font-face

Esta regla se utiliza para cargar fuentes en nuestra hoja de CSS que luego podremos utilizar en cualquier elemento (como de costumbre).

La regla de @font-face tiene un montón de opciones, pero eso ya lo hablaremos en otro artículo.

Ahora vamos a ver como descargar y almacenar nuestra fuente en nuestro sitio web para luego utilizarla en nuestra página.

Cómo usar fuentes en local (en CSS)

Veamos pues como usar esta regla en CSS, ya verás que es muy fácil.

Te dejo un vídeo donde lo explico.

Hemos descargado la fuente primero. Para ello, he seguido los pasos que hemos seguido en los anteriores vídeos.

Ir a la página de fonts.google.com y luego hemos creado descargado la fuente en una carpeta.

A continuación, extraemos los archivos de la fuente y los guardamos en una carpeta de nuestro proyecto.

Ahora iremos a nuestro documento html, crearemos una hoja de estilos y dentro de la hoja de estilos escribiremos las siguientes líneas de código.

@font-face{
  font-family: 'Lato';
  src:url(/fuentes/Lato-Bold.ttf);
  font-weight: bold;
  font-style: bold;
}

En este caso utilizamos la fuente lato y cargamos el estilo bold, para los títulos y subtítulos.

h1{
  font-family: 'Lato';
  font-weight: bold;
}

Aquí cambiamos la fuente de los elementos h1 de nuestro sitio web, con el estilo bold.

Si quisiéramos cargar otros estilos de la misma fuente, deberíamos hacer lo mismo. Pero cargando otro tipo de estilos.

Y ya esta ¡Así de simple!

Recuerda que si tienes alguna duda o alguna sugerencia puedes dejármela en los comentarios ¡Bye!