Módulo 5

Tipografías y fuentes

Este es nuestro primer paso con CSS, el segundo lenguaje del curso (recuerda el Módulo 0: HTML son las piezas, CSS es la pintura). Vamos a aprender dónde se escribe el CSS y cómo cambiar la fuente (tipografía) del texto, usando una fuente de tu ordenador y otra de Google Fonts. Si el HTML te costó al principio, tranquilo/a: el CSS se parece más a rellenar una ficha con "propiedad: valor", y con la práctica de este módulo le cogerás el truco enseguida.

En este módulo vas a...

Aprender las 3 formas de añadir CSS a una página.
Usar la propiedad font-family.
Aplicar una fuente instalada en tu ordenador.
Traer una fuente de Google Fonts y aplicarla.

¿Dónde se escribe el CSS?

Hay tres formas de añadir estilos a tu HTML. Usaremos sobre todo la tercera.

1. Estilo en línea (para pruebas rápidas, evítalo en tu proyecto final)

<h1 style="font-family: Georgia, serif;">Hola</h1>

2. Dentro de una etiqueta <style> en el <head>

<head>
  <style>
    h1 {
      font-family: Georgia, serif;
    }
  </style>
</head>

3. En un archivo CSS aparte (la forma recomendada)

<!-- en tu archivo index.html -->
<head>
  <link rel="stylesheet" href="estilos.css">
</head>

/* en tu archivo estilos.css */
h1 {
  font-family: Georgia, serif;
}

¿Por qué un archivo aparte?

Porque mantienes separado "qué hay" (HTML) de "cómo se ve" (CSS), y puedes reutilizar el mismo archivo estilos.css en varias páginas de tu proyecto (¡como haremos con index.html y blog.html!).

La propiedad font-family

Toda regla de CSS tiene la misma forma, siempre. Aprende bien esta estructura porque la usarás cientos de veces:

selector {
  propiedad: valor;
}

📖 Palabras nuevas

Selector: A quién le aplicamos el estilo: por ejemplo h1 significa "a todos los h1 de la página".
Llaves { }: Marcan el principio y el final de las reglas para ese selector. Todo lo que cambia ese selector va dentro de ellas.
Propiedad: Qué característica quieres cambiar: el color, el tamaño, la fuente... Por ejemplo font-family.
Valor: A qué quieres cambiarla. Se escribe después de los dos puntos : y la línea termina siempre en punto y coma ; (fácil de olvidar al principio, ¡acostúmbrate a revisarlo!).

Por ejemplo, h1 { font-family: Georgia, serif; } se lee así: "al selector h1, cámbiale la propiedad font-family al valor Georgia, serif". Para cambiar la tipografía usamos siempre la propiedad font-family, seguida de una lista de fuentes separadas por comas: si la primera no está disponible en el ordenador de quien visita la página, el navegador prueba automáticamente con la siguiente.

Fuente 1: una instalada en tu ordenador

Estas son fuentes que ya vienen instaladas en la mayoría de ordenadores (o en tu sistema operativo), así que no hay que "traerlas" de ningún sitio: solo escribir su nombre.

body {
  font-family: Georgia, "Times New Roman", serif;
}

Así se ve un texto con font-family: Georgia, serif.

Al final siempre añadimos una familia genérica como red de seguridad, por si ninguna fuente concreta está disponible:

Familia genérica	Ejemplo
`serif`	letras con "patines" — Georgia, Times
`sans-serif`	letras sin patines — Arial, Verdana
`monospace`	todas las letras del mismo ancho — Courier
`cursive`	parecida a escritura a mano

Fuente 2: traída de Google Fonts

Google Fonts (fonts.google.com) ofrece cientos de fuentes gratis que se descargan automáticamente en el navegador de quien visita tu página, aunque no la tenga instalada.

Busca en tu navegador "Google Fonts" y entra en la página oficial (fonts.google.com). No necesitas cuenta ni registrarte.
Explora y elige una fuente que te guste, haciendo clic sobre su nombre.
Busca y pulsa el botón "Get font" / "Obtener fuente".
Busca la opción de "usar en la web" o similar, y copia el código que empieza por <link href=...>: ese trocito de código es el que necesitas (no hace falta descargar ningún archivo).
Pega ese <link> dentro de tu <head>, antes del <link> a tu propio archivo CSS.
Escribe el nombre exacto de la fuente (entre comillas, tal cual aparece en Google Fonts) en tu font-family.

<!-- en el head -->
<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">

/* en tu CSS */
h1 {
  font-family: "Patrick Hand", cursive;
}

Así se ve un texto con la fuente de Google "Patrick Hand".

Cuidado con el orden

El <link> de Google Fonts debe ir antes que el <link> a tu propio estilos.css en el <head>, para que la fuente ya esté disponible cuando el navegador aplique tus reglas.

Practica: dos fuentes en una tarjeta

Este código ya trae la fuente de Google "Playfair Display" cargada. Aplica font-family: "Playfair Display", serif; al h2 y font-family: Georgia, serif; al párrafo.

✏️ Pruébalo tú mismo/a

Tu código HTML

Así se ve en el navegador