Propiedad 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:

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:

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:

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

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.