{"id":7677,"date":"2022-03-14T17:09:55","date_gmt":"2022-03-14T17:09:55","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7677"},"modified":"2022-03-19T07:17:48","modified_gmt":"2022-03-19T07:17:48","slug":"como-agregar-una-fuente-a-tu-pagina-web-con-css","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/como-agregar-una-fuente-a-tu-pagina-web-con-css\/","title":{"rendered":"Como agregar una fuente a tu p\u00e1gina web con CSS"},"content":{"rendered":"

Las fuentes<\/strong> o tipograf\u00edas<\/strong> son una parte muy importante dentro del mundo CSS<\/strong>, tanto as\u00ed que se pueden describir como uno de los pilares del dise\u00f1o web<\/strong>.<\/p>\n

La elecci\u00f3n de una tipograf\u00eda adecuada, su tama\u00f1o, color, espaciado entre letras, interlineado y otras caracter\u00edsticas pueden ser muy diversas y es cuesti\u00f3n de percepci\u00f3n personal elegir una fuente u otra.<\/p>\n

Personalmente, no suelo prestarle mucha atenci\u00f3n pero la fuente de una p\u00e1gina web es m\u00e1s importante de lo que parece.<\/p>\n

Es importante que el sitio web se sienta identificado con ella y m\u00e1s importante a\u00fan es que sea f\u00e1cil de leer de cara a los usuarios que la visitan.<\/p>\n

Siempre que un visitante se sienta c\u00f3modo leyendo un texto ser\u00e1 un motivo m\u00e1s para no abandonar la p\u00e1gina.<\/p>\n

En este art\u00edculo vas a ver como aplicar diferentes fuentes utilizando las propiedades CSS<\/strong> adecuadas para ello en tu hoja de estilos personalizada.<\/p>\n

Con la propiedad font-family<\/em> de CSS<\/strong> puedes aplicar una fuente a tus p\u00e1ginas webs o elementos seleccionados.<\/p>\n

Fuentes del sistema<\/h2>\n

Los sistemas operativos de los ordenadores suelen tener algunas fuentes instaladas y muchas p\u00e1ginas webs las usan para mostrar sus contenidos a los usuarios.<\/p>\n

Algunas de las fuentes m\u00e1s populares del sistema son la fuente Arial<\/em>, Verdana<\/em> o Lucida Sans<\/em>, entre otras.<\/p>\n

Personalmente, a mi siempre me ha gustado la fuente Lucida Sans<\/em> pero, es posible que para muchos de vosotros la fuente que m\u00e1s os pueda gustar sea otra. Es cuesti\u00f3n de gustos elegir la fuente adecuada para tu proyecto.<\/p>\n

Para agregar una fuente del sistema a tus reglas de estilos, en tu archivo CSS<\/strong> puedes agregar algo como lo que sigue:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
body {<\/span>\n    font-family<\/span>:<\/span> Arial,<\/span> Helvetica,<\/span> sans-serif<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
En este caso, a todo el cuerpo de la p\u00e1gina web le estamos aplicando una fuente Arial<\/em>.<\/p>\n
Es bueno declarar otras fuentes por si acaso. En el ejemplo, estamos estableciendo 3 fuentes distintas.<\/p>\n
Si el sistema que est\u00e1 visualizando la p\u00e1gina web no tiene instalada la fuente Arial<\/em>, se mostrar\u00eda la fuente Helvetica<\/em>, si tampoco tiene la fuente Helvetica<\/em>, se mostrar\u00eda la fuente sans-serif<\/em>.<\/p>\n
Tambi\u00e9n podemos declarar una clase:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
.lucida<\/span> {<\/span>\n    font-family<\/span>:<\/span>'Lucida Sans'<\/span>,<\/span> Verdana,<\/span> sans-serif<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
y agregarla en etiquetas HTML<\/strong>, como por ejemplo en un p\u00e1rrafo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<p<\/span><\/a> class<\/span>=<\/span>"lucida"<\/span>><\/span>Lorem ipsum<\/<\/span>p<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
De hecho, a cualquier etiqueta HTML<\/strong> podr\u00edas agregarle la clase \u00ablucida\u00bb para mostrar el contenido con esta fuente.<\/p>\n
Fuentes externas<\/h2>\n
Antiguamente, utilizar fuentes con CSS<\/strong> estaba bastante limitado a las fuentes del sistema.<\/p>\n
Un inconveniente es que te arriesgas a que tu p\u00e1gina 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.<\/p>\n
Otro problema es que las fuentes que est\u00e1n instaladas en sistemas operativos con Windows como pueden ser la Times new Roman<\/em>, Tahoma<\/em>, Arial<\/em>, etc, se ven correctamente en navegadores con dicho sistema operativo pero no ocurre lo mismo en dispositivos con Linux o Mac.<\/p>\n
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\u00f3 la regla de CSS<\/strong> @font-face<\/strong> que permite descargar una fuente o tipograf\u00eda de una p\u00e1gina web, cargarla en el navegador y utilizarla en nuestras p\u00e1ginas aunque no est\u00e9 instalada en el sistema.<\/p>\n
La regla @font-face<\/strong> siempre debes incluirla al principio de tu archivo .css para avisar al navegador que vas a utilizar una fuente que posiblemente no est\u00e9 instalada en el sistema operativo.<\/p>\n
Si visitas la p\u00e1gina de Google Fonts<\/a>, podr\u00e1s encontrar un amplio cat\u00e1logo de fuentes que podr\u00e1s utilizar o descargar de forma gratuita.<\/p>\n
Es bastante c\u00f3modo, ya que Google<\/strong> nos proporciona un c\u00f3digo por cada fuente que tan solo tenemos que copiar y pegar en tu proyecto para disponer de la fuente que desees.<\/p>\n
Tienes 2 posibilidades para agregar las fuentes a tu proyecto:<\/p>\n