Propiedad font-family

DefiniciónEstablece la fuente o tipo de letra
Valores
permitidos
  1. Uno y sólo uno de los siguientes valores:
    • Nombre de la fuente o tipo de letra
    • Nombre genérico de la fuente o tipo de letra
    Seguido opcionalmente por uno o más de los siguientes valores:
    • Nombre de la fuente o tipo de letra
    • Nombre genérico de la fuente o tipo de letra
  2. inherit
Valor inicialDepende del navegador
Se aplica aTodos los elementos
Válida enmedios visuales
Se heredasi
Definición en
el estándar
w3.org/TR/CSS21/fonts.html#propdef-font-family

Ejemplos de uso

La propiedad font-family establece la fuente o tipo de letra con la que se muestra el texto. Cuando no se establece de forma explícita el tipo de letra, los navegadores muestran el texto con un tipo de letra por defecto. Aunque la fuente por defecto depende de cada navegador, la mayoría utilizan Times New Roman o la fuente disponible que más se parezca.

La forma más sencilla de establecer el tipo de letra es indicar el nombre completo de la fuente:

<p style="font-family: Verdana;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim. Pellentesque id pede vitae pede ultricies gravida. Sed vulputate. Vestibulum quis ipsum. Aenean nec quam. Sed ultrices tempor massa.</p>

<p style="font-family: Arial;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim. Pellentesque id pede vitae pede ultricies gravida. Sed vulputate. Vestibulum quis ipsum. Aenean nec quam. Sed ultrices tempor massa.</p>

<p style="font-family: Georgia;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim. Pellentesque id pede vitae pede ultricies gravida. Sed vulputate. Vestibulum quis ipsum. Aenean nec quam. Sed ultrices tempor massa.</p>

Si el nombre de la fuente incluye espacios en blanco, comas, barras, paréntesis y otros caracteres potencialmente problemáticos, el estándar de CSS 2.1 indica que se debe encerrar su nombre entre comillas simples o dobles:

<p style="font-family: 'Trebuchet MS';">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim. Pellentesque id pede vitae pede ultricies gravida. Sed vulputate. Vestibulum quis ipsum. Aenean nec quam. Sed ultrices tempor massa.</p>

<p style="font-family: 'Lucida Grande';">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim. Pellentesque id pede vitae pede ultricies gravida. Sed vulputate. Vestibulum quis ipsum. Aenean nec quam. Sed ultrices tempor massa.</p>

Cuando una página web establece que su texto se debe mostrar con un tipo de letra concreto, los navegadores buscan esa fuente entre la lista de fuentes instaladas en el dispositivo con el que accede el usuario. Por ese motivo, si se emplean fuentes profesionales o poco conocidas, la mayoría de los usuarios normales no la tendrán instalada. En este caso, los navegadores sustituyen esa fuente por otra fuente genérica.

Afortunadamente, la propiedad font-family permite indicar una serie de fuentes alternativas separadas por comas. La lista de fuentes tiene prioridad, por lo que los navegadores intentan mostrar el texto con la primera fuente y si no está disponible, intentan utilizar la segunda fuente y así sucesivamente hasta la última fuente indicada:

body {
  font-family: Arial, Helvetica, Verdana;
}
 
p {
  font-family: Georgia, Cambria, Times, "Times New Roman";
}

Aunque se pueden indicar tantas fuentes alternativas como se necesiten, nunca es posible asegurar que todos los usuarios disponen de al menos una de las fuentes alternativas. Por este motivo, CSS también permite indicar nombres genéricos de fuentes. Los cinco nombres genéricos no hacen referencia a fuentes concretas, sino al aspecto con el que se muestra el texto.

A continuación se muestran los cinco valores genéricos definidos y la lista de fuentes con un aspecto similar a ese valor:

Valor genérico Fuentes con aspecto similar
serif Times New Roman, Times, Garamond, Georgia, Cambria
sans-serif Arial, Helvetica, Verdana, Trebuchet, Tahoma, Futura
cursive Comic Sans
fantasy Comic Sans, Impact
monospace Courier New, Monaco, Consolas

El aspecto con el que se muestran los cinco valores genéricos es el siguiente:

font-family: serif
abcdefghijklmñnopqrstuvwxyz

font-family: sans-serif
abcdefghijklmñnopqrstuvwxyz

font-family: cursive
abcdefghijklmñnopqrstuvwxyz

font-family: fantasy
abcdefghijklmñnopqrstuvwxyz

font-family: monospace
abcdefghijklmñnopqrstuvwxyz

El aspecto real de cada valor genérico depende tanto del navegador utilizado como de las fuentes instaladas en el dispositivo con el que se accede a la página.

En la práctica, cuando se define el tipo de letra del texto, se utiliza una lista de fuentes alternativas en la que el último valor siempre es uno de los valores genéricos. De esta forma, primero se intenta mostrar el texto con el tipo de letra deseado por el diseñador y si no es posible, se utiliza un valor genérico cuyo aspecto sea similar al deseado:

body {
  font-family: Arial, Helvetica, Verdana, sans-serif;
}
 
p {
  font-family: Georgia, Cambria, Times, "Times New Roman", serif;
}

Algunas series de fuentes se utilizan tan a menudo que prácticamente se han convertido en un estándar. La siguiente lista muestra las series de fuentes más utilizadas:

font-family: Arial, Helvetica, sans-serif;
font-family: "Times New Roman", Times, serif;
font-family: "Courier New", Courier, monospace;
font-family: Georgia, "Times New Roman", Times, serif;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-family: Geneva, Arial, Helvetica, sans-serif;

Como la propiedad font-family no lo permite, si se quiere mostrar el texto con una fuente especial que no dispone la mayoría de usuarios, se debe recurrir a técnicas como sIFR, que combina Flash y JavaScript para mostrar cualquier fuente.