CSS Como poner cualquier tipografia/fuente en tu web ( @Font-Face )

Brayan Pastor
Jul 28, 2017 · 1 min read

La tipografía en el mundo web es sumamente importante, mediante estas podemos dar una completa personalidad a nuestra aplicación web, y por mencionar que con la tipografia podemos dar jerarquia de contenido, y es que representa mas del 70% del contenido.

  1. - En primer lugar tienes que tener tu fuente descargada puedes usar los que estan disponibles en tu propia computadora o usar estas paginas para descargarlas.

Luego

2.- En tu documento .css o preprocesador de tu preferecia, agregar:

@font-face permite definir una tipografía e importarla para su posterior uso en tu pagina web.

  • font-family: Es el nombre de tu fuente, recuerda que esta se utilizará para las etiquetas o clases que quieras cambiar su tipografia
  • src: Es la ruta en donde se encuentra tu fuente, estas puedes ser .ttf , .svg, oet, .woff, otf. Puedes declarar un lista de ubicaciones con la misma fuente en distintos formatos, separandolos con una coma “,”.
  • font-weight: es la fuerza o peso que tendra la fuente, puedes ser de 100, 200,300,400,500,600,700,800,900 ó lighter, normal, bold.
  • font-style: Esta propiedad define como se va a estilizar la fuente. Puede ser normal, italic, oblique.

Uso

. Lo unico que tienes que hacer es usar la propiedad font-family en la etiqueta o clase que quieras cambiar la fuente. Ejemplo.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade