CSS Como poner cualquier tipografia/fuente en tu web ( @Font-Face )
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.
- - 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.
- https://www.fontsquirrel.com
- http://www.abstractfonts.com/
- http://www.dafont.com/es/
- https://www.urbanfonts.com/
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.
