Familia de fuentes

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 18 de 76.

En CSS, la propiedad font-family se utiliza para especificar el tipo de letra para el texto dentro de un elemento HTML. Esta propiedad le permite enumerar las fuentes preferidas para su texto. Si la primera fuente no está disponible, el navegador utilizará la siguiente en la lista, asegurando 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.

Hoja de referencia

La propiedad font-family especifica el tipo de letra para el texto. Enumere las fuentes preferidas en orden; si la primera no está disponible, el navegador utiliza la siguiente.

Sintaxis básica:

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

Directrices:

Los nombres de fuentes con espacios necesitan comillas: "Times New Roman"
Separe varias fuentes con comas
Incluya una familia genérica (serif, sans-serif, monospace, cursive, fantasy) como alternativa

Ejemplo:

p {
    font-family: 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>