Cuando creas páginas web, puedes elegir entre una serie de fuentes para aplicar a los textos de la misma. Pero, ¿y si queremos que nuestra web tenga una fuente en especial?
Bien, lo primero será buscar los archivos de la fuente que quieres utilizar. Para ello, con una simple búsqueda por Internet encontrarás miles de ellas listas para su descarga. En este caso, vamos a usar el formato Truetype, para ello, la fuente que te bajes tiene que tener la extensión de archivo TTF.
Una vez la tengas, para añadir esta fuente a tu página web, tan simple como añadir las siguientes líneas a tu hoja de estilo.
1 2 3 4 5 6 | @font-face { font-family: 'NombreFuente'; src: url('../fonts/fuenteDescargada.ttf') format("truetype"); font-weight: normal; font-style: normal; } |
En este código, NombreFuente indica el nombre que quieres dar a esta nueva fuente; y en la tercera línea del código, en el atributo src deberás indicar la ruta, dentro del sitio web que estés creando, donde hayas guardado la fuente descargada.
Una vez añadido este código a tu hoja de estilos, o directamente a la página mediante HTML, simplemente usa esta nueva fuente como normalmente usarías cualquier otra, es decir, asignando, al atributo font-family del estilo del elemento que desees, el valor que hayas dato en el código anterior.
1 | <p style="font-family: 'NombreFuente';">Mi texto</p> |
A continuación te mostramos un par de ejemplos:
- Ejemplo 1 de uso de fuente personalizada
- Ejemplo 2 de uso de fuente personalizada
Ya puedes hacer que tu web luzca mejor usando cualquier fuente que quieras y no solo las que, por defecto, permiten los distintos navegadores.