En este articulo aprenderás a añadir cualquier fuente tipográfica a tu pagina web de una manera fácil y rápida paso a paso, una de las cosas que nos pasa por la cabeza muchas veces cuando visitamos un sitio web es como podemos tener esa fuente en la nuestra y aquí te decimos como hacerlo.
Pasos para añadir una fuente a tu pagina web
- Paso numero uno, nos dirigimos a la pagina Dafont https://www.dafont.com/es/ para descargarnos alguna fuente.
- Descargamos alguna fuente y descomprimimos el archivo.
- Cambiamos el nombre a la fuente por uno mas amigable por ejemplo yo le pondré mifuente.otf (muy importante la extensión de la fuente en este caso otf).
- Agregamos una clase a la etiqueta que queremos añadir la fuente por ejemplo le cambiare el tipo de fuente la etiqueta 'p':
<p class="miclase">Esta es la etiqueta a la que le vamos a cambiar la fuente</p>
- una vez que ya tenemos definido la etiqueta y la clase nos vamos al archivo Css de nuestro sitio web, en mi caso es estilos.css
- Agregamos el siguiente código incluyendo el nombre y la ruta de la fuente que nos descargamos.
@font-face {
font-family: 'danger';
src:url('../fonts/danger.otf') format('truetype');
}- font-family 'danger' es el nombre de la fuente y src:url la ruta donde tienes el archivo de la fuente en este caso yo tengo el archivo dentro de la carpeta public/fonts/miarchivo.otf
- solo queda darle estilo a la clase 'miclase' que agregamos en la etiqueta 'p' y todo esta listo:
.miclase {
font-family: 'danger', sans-serif;
color: #000; font-size: 14px;
}
la clase 'miclase' ahora tiene la fuente 'danger' color negro y un tamaño de fuente de 14 px.
Ahora ya sabes como añadir una fuente a tu sitio web sea cual sea de una manera fasil y rapida, si este tutorial te ha servido no dudes en dejarnos un like en nuestro sitio web, saludos de parte del equipo de ManaTums Developers.
Manatums Developers..
Creado Por: Obed
Post Creados: 16
Role: admin
Fecha De creación: hace 3 años
Categoria: Html - Css
Mas publicaciones
