CSS

Cambiar la fuente de la letra (texto) HTML con CSS

Las fuentes de letras que se utilice en un sitio web desarrollado con HTML y CSS pueden determinar que tan atractiva se ve, aunque algunos desestimen completamente su uso y se queden con los tipos que vienen por defecto.

En este tutorial te vamos a explicar cómo cambiar de fuente (font) con CSS, para que puedas desarrollar un sitio web moderno e impactante en una primera instancia. Podremos comprobar que unas pocas lineas de código CSS se podrá modificar el tipo de letra de todo el cuerpo HTML.

Ejemplo de cambio de fuente en un texto HTML con CSS

Para comprender mejor cómo realizar un cambio de fuente o tipografía, a continuación te proporcionaremos un breve ejemplos de código. El mismo está completo y se encuentra en HTML y CSS.

<html>
  <head>
    <title>Cambiar la fuente de la letra al HTML con CSS</title>
    <style>
      .texto {
        font-family: Verdana;
      }
    </style>
  </head>
  <body>
    <div class="texto">Texto de prueba</div>
  </body>
</html>

En el ejemplo anterior se puede apreciar que con el atributo CSS font-family se modifica la tipografía del texto que está dentro de una etiqueta div de clase texto.

La propiedad font-family acepta varias fuentes, las cuales vienen incorporadas por defecto. A continuación te dejamos algunas fuentes adicionales que se pueden utilizar libremente en cualquier sitio web.

Family GenéricoFont familyDescripción
SerifTimes New Roman
Georgia
Las fuentes Serif tienen pequeñas líneas en los extremos de algunos caracteres.
Sans-serifArial
Verdana
“Sans” significa sin – estas fuentes no tienen líneas en los extremos de los caracteres
MonospaceCourier New
Lucida Console
Todos los caracteres monoespacios tienen el mismo ancho.

Utilizar fuentes (fonts) de Google

Google ofrece gratuitamente y libremente una gran variedad del fuentes para que puedas utilizar en tus proyectos. Las misma fuentes se pueden ver en https://fonts.google.com. Para utilizar alguna de sus fuentes solamente es necesario importarla dentro del HTML. A continuación te dejaremos un breve ejemplo de cómo hacerlo, reutilizando el código anterior.

<html>
  <head>
    <title>Cambiar la fuente de la letra al HTML con CSS usando las fuentes de Google</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      .texto {
        font-family: 'Tangerine', serif;
      }
    </style> 
  </head>
  <body>
    <div class="texto">Texto de prueba</div>
  </body>
</html>

Eso es lo básico que hay que saber para poder modificar o cambiar las fuentes de los texto en HTML con CSS. En caso de que tengan una duda pueden dejar un comentario al final del tutorial.

Compartir esto:

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *