Familia tipográfica

Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 18 de 76.

En CSS, la propiedad font-family se utiliza para especificar la tipografía del texto dentro de un elemento HTML. Esta propiedad te permite enumerar las fuentes preferidas para tu texto. Si la primera fuente no está disponible, el navegador utilizará la siguiente de la lista, lo que garantiza una apariencia similar.

Aquí está la sintaxis básica para usar la propiedad font-family:

selector {
    font-family: font1, font2, generic-family;
}

font1, font2: Los nombres de las familias de fuentes preferidas, enumerados en orden de preferencia. Si font1 no está disponible, el navegador probará con font2, y así sucesivamente.

generic-family: Un nombre de familia de fuentes genérica, como serif, sans-serif, monospace, cursive, o fantasy. Esto sirve como respaldo si ninguna de las fuentes especificadas está disponible.

Al especificar nombres de familias de fuentes, es importante seguir estas pautas:

Si el nombre de una familia de fuentes contiene espacios en blanco, debe ir entre comillas (p. ej., "Times New Roman", "Courier New").

Los nombres de múltiples familias de fuentes deben estar separados por comas.

Es una buena práctica incluir una familia de fuentes genérica como la última opción en la lista para asegurar que se utilice una alternativa adecuada si ninguna de las fuentes especificadas está disponible.

Por ejemplo:

p {
    font-family: Arial, Helvetica, sans-serif;
}

Desafío

Fácil

Se te proporciona un documento HTML con un encabezado (<h1>) y un párrafo (<p>). Tu tarea es usar la propiedad font-family para dar estilo a estos elementos. Sigue los pasos a continuación:

Escribe una regla CSS que apunte al elemento <h1>. Establece el font-family a "Times New Roman", Times, serif.
Escribe una regla CSS que apunte al elemento <p>. Establece el font-family a Arial, Helvetica, sans-serif.

Pruébalo tú mismo

<html>
<head>
    <title>Font Family</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>