Como agregar una fuente a tu página web con CSS
Las fuentes o tipografías son una parte muy importante dentro del mundo CSS, tanto así que se pueden describir como uno de los pilares del diseño web.
La elección de una tipografía adecuada, su tamaño, color, espaciado entre letras, interlineado y otras características pueden ser muy diversas y es cuestión de percepción personal elegir una fuente u otra.
Personalmente, no suelo prestarle mucha atención pero la fuente de una página web es más importante de lo que parece.
Es importante que el sitio web se sienta identificado con ella y más importante aún es que sea fácil de leer de cara a los usuarios que la visitan.
Siempre que un visitante se sienta cómodo leyendo un texto será un motivo más para no abandonar la página.
En este artículo vas a ver como aplicar diferentes fuentes utilizando las propiedades CSS adecuadas para ello en tu hoja de estilos personalizada.
Con la propiedad font-family de CSS puedes aplicar una fuente a tus páginas webs o elementos seleccionados.
Fuentes del sistema
Los sistemas operativos de los ordenadores suelen tener algunas fuentes instaladas y muchas páginas webs las usan para mostrar sus contenidos a los usuarios.
Algunas de las fuentes más populares del sistema son la fuente Arial, Verdana o Lucida Sans, entre otras.
Personalmente, a mi siempre me ha gustado la fuente Lucida Sans pero, es posible que para muchos de vosotros la fuente que más os pueda gustar sea otra. Es cuestión de gustos elegir la fuente adecuada para tu proyecto.
Para agregar una fuente del sistema a tus reglas de estilos, en tu archivo CSS puedes agregar algo como lo que sigue:
body {
font-family: Arial, Helvetica, sans-serif;
}En este caso, a todo el cuerpo de la página web le estamos aplicando una fuente Arial.
Es bueno declarar otras fuentes por si acaso. En el ejemplo, estamos estableciendo 3 fuentes distintas.
Si el sistema que está visualizando la página web no tiene instalada la fuente Arial, se mostraría la fuente Helvetica, si tampoco tiene la fuente Helvetica, se mostraría la fuente sans-serif.
También podemos declarar una clase:
.lucida {
font-family:'Lucida Sans', Verdana, sans-serif;
}y agregarla en etiquetas HTML, como por ejemplo en un párrafo:
De hecho, a cualquier etiqueta HTML podrías agregarle la clase «lucida» para mostrar el contenido con esta fuente.
Fuentes externas
Antiguamente, utilizar fuentes con CSS estaba bastante limitado a las fuentes del sistema.
Un inconveniente es que te arriesgas a que tu página web no se vea con la fuente que quieres a muchos usuarios por el simple hecho de no tener la fuente instalada en su sistema operativo.
Otro problema es que las fuentes que están instaladas en sistemas operativos con Windows como pueden ser la Times new Roman, Tahoma, Arial, etc, se ven correctamente en navegadores con dicho sistema operativo pero no ocurre lo mismo en dispositivos con Linux o Mac.
Con las fuentes del sistema no es sencillo usar una fuente que se vaya a ver bien en todos los dispositivos al menos hasta que llegó la regla de CSS @font-face que permite descargar una fuente o tipografía de una página web, cargarla en el navegador y utilizarla en nuestras páginas aunque no esté instalada en el sistema.
La regla @font-face siempre debes incluirla al principio de tu archivo .css para avisar al navegador que vas a utilizar una fuente que posiblemente no esté instalada en el sistema operativo.
Si visitas la página de Google Fonts, podrás encontrar un amplio catálogo de fuentes que podrás utilizar o descargar de forma gratuita.
Es bastante cómodo, ya que Google nos proporciona un código por cada fuente que tan solo tenemos que copiar y pegar en tu proyecto para disponer de la fuente que desees.
Tienes 2 posibilidades para agregar las fuentes a tu proyecto:
- Descarga de la fuente y usar font-face local
- Instalar fuente a través de CDN
Descarga de la fuente y usar font-face local en tu página web
En Google Fonts tienes la opción de descargar toda la tipografía e incluirla en tu proyecto.
Una buena forma de trabajar con las fuentes en local es crear un directorio llamado fonts en el mismo directorio donde tengas tu carpeta css donde alojar los archivos de las fuentes que vayas a utilizar en el proyecto.
En las primeras líneas de tu hoja de etilos puedes agregar el siguiente código:
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto/Roboto-Regular.ttf');
}En este caso, hemos elegido la fuente Roboto y estamos incluyendo una de sus versiones con font-face.
Luego, puedes declarar una clase en tu hoja de estilos como la que sigue para utilizarla:
.roboto {
font-family: 'Roboto', sans-serif;
}Instalar fuente a través de CDN en tu página web
Esta opción es mucho más sencilla y la puedes utilizar si no tienes reparos para usar recursos externos en tu página web.
Tienes 2 opciones:
- Incluir fuente con <link> o través del HTML
- Incluir fuente con @import o a través del CSS
Incluir fuente con <link> o través del HTML
Puedes agregar el siguiente código en la cabecera o <head> de tu HTML:
Incluir fuente con @import o a través del CSS
En tu hoja de estilos puedes agregar el siguiente código al principio del documento:
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto:wght@300;400&display=swap');(*) Recuerda que estos ejemplos son para incluir la fuente Roboto. Para cualquier otra fuente, debes dirigirte a Google Fonts a copiar y pegar sus correspondientes códigos.
Conclusiones
Hacer que la web sea más hermosa, rápida y abierta a través de una gran tipografía es un factor determinante para que tu proyecto web sea todo un éxito.
Si las fuentes del sistema no son lo suficientemente atractivas para ti, te recomiendo que visites sin falta la página de Google Fonts donde podrás encontrar un amplio catálogo de fuentes muy interesantes.
Eso si, usa fuentes externas con moderación. Como todo en la vida, no es bueno abusar.
No sería una buena práctica usar un montón de fuentes para tu proyecto. Te recomiendo que uses una, dos o tres como máximo.
Ten en cuenta que cada fuente carga archivos y eso hará que tu web pierda milésimas de segundo en la carga.
Autor
Te ha servido? Valora esta entrada!
Comparte en las redes sociales
¿Buscas trabajo de programador?
Deja una respuesta