Propiedad font-family de CSS

La propiedad font-family te permite especificar una lista priorizada de nombres de familias tipográficas y/o nombres de familias genéricas para el elemento seleccionado.

Utilizamos comas para separar los valores y mostrarlos como alternativas. El navegador seleccionará la primera fuente para usar si está disponible. Sin embargo, puede no estar disponible en algunos casos si la computadora del usuario no tiene esa fuente. Cuando ocurre esta situación, el navegador intentará usar la siguiente alternativa para mostrar el texto (o incluso un carácter que la primera fuente no pueda mostrar).

Existen dos tipos de nombres de familias tipográficas:

family-name: Es el nombre de una familia tipográfica como "times", "courier", "arial", etc.
generic-family: Es el nombre de una familia genérica como "serif", "sans-serif", "system-ui", "ui-sans-serif", "cursive", "fantasy", "monospace".

Cuando el nombre de la fuente contiene espacios en blanco, debe ir entre comillas, por ejemplo: "Courier New".

éxito
Cuando queremos usar una font-family personalizada, necesitamos usar la regla @font-face.

Valor inicial	serif
Se aplica a	Todos los elementos. También se aplica a ::first-letter y ::first-line.
Heredada	Sí.
Animable	No.
Versión	CSS1
Sintaxis DOM	object.style.fontFamily = "Verdana, sans-serif";

La propiedad font-family especifica una lista de fuentes, desde la de mayor prioridad hasta la de menor prioridad (fallback). La selección de fuentes no se detiene en la primera fuente de la lista; se realiza carácter por carácter. Esto significa que si una fuente disponible no tiene un glifo para un carácter específico, el navegador intentará usar las siguientes fuentes de la lista.

Sintaxis

Sintaxis de la propiedad font-family de CSS

css

font-family: family-name | generic-family | initial | inherit;

Ejemplo de la propiedad font-family:

Ejemplo de la propiedad CSS font-family con el valor sans-serif

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>Font-family property example</h2>
    <p>We used "Lucida Grande" font-family for this text.</p>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción	Probarlo
family-name, generic-family	Lista priorizada de nombres de familias tipográficas y/o nombres de familias genéricas.	Probarlo »
initial	Hace que la propiedad use su valor predeterminado.	Probarlo »
inherit	Hereda la propiedad de su elemento principal.	Probarlo »

Práctica

¿Qué hace la propiedad 'font-family' en CSS?

Establece la fuente del textoCambia el color del textoEspecifica la alineación del textoPermite el uso de una fuente de respaldo en caso de que la fuente especificada no esté disponiblePermite especificar más de una fuente

Propiedad font-family de CSS ​

Sintaxis ​

Ejemplo de la propiedad font-family: ​

Valores ​

Práctica ​

Propiedad font-family de CSS

Sintaxis

Ejemplo de la propiedad font-family:

Valores

Práctica