En las versiones HTML anteriores a la nueva versión, que es HTML 5, se podía especificar una fuente con etiquetas HTML. Si quisieras Arial, por ejemplo, podrías hacer esto:

<FONT face="Arial, Helvetica, san-serif"> Algún texto aquí </FONT ];

Sin embargo, en HTML 5 la etiqueta FONT está obsoleta. Eso no significa que ya no puedas usarlo, ya que los navegadores son compatibles con los anteriores, lo que significa que el código antiguo funcionará con todos los navegadores. Pero si quieres ir con la forma moderna de hacer las cosas, entonces las fuentes, los tamaños y los colores de las fuentes deben hacerse con una hoja de estilo.

Para cambiar la fuente de tu página, se utiliza la propiedad font-family CSS:

font-family: arial, helvetica, sans-serif;

Especificas la familia porque la persona que ve tu página puede no tener la primera fuente de tu lista. En ese caso, se intenta la segunda fuente, y luego la tercera. (Puedes tener más de tres, si quieres. O menos de tres.)

Puedes especificar una sola fuente en su lugar, pero no todo el mundo tiene esa fuente tan elegante que te gusta tanto. En ese caso, obtendrían la predeterminada, que suele ser una fuente serif.

NOTA: Una serifa es una marca o adorno en la línea vertical u horizontal del texto. Aquí hay un ejemplo de la fuente serifa Times New Roman:

CSS y fuentes

Una fuente sin serifa es una fuente sin marcas ni adornos. Sólo líneas rectas, en otras palabras. Aquí está la fuente Arial sans-serif:

CSS y fuentes

Y aquí hay algunas familias de fuentes predeterminadas que puedes usar con bastante seguridad:

Times New Roman, Times, Serif
Courier New, Courier, Mono
Georgia, Times New Roman, Times, Serif
Verdana, Arial, Helvética, Sans-Serif
Ginebra, Arial, Helvética, San-Serif

Pruébalos tú mismo con el siguiente estilo de familia de fuentes añadido a tu código H1:

CSS y fuentes

Guarda y actualiza tu navegador. El encabezado debería cambiar de una fuente serif por defecto a una de las fuentes sans-serif: Arial, Helvetica, sans-serif.

Pero tu navegador debería tener este aspecto:

CSS y fuentes

Ahora prueba con una de las otras familias de fuentes de la lista. Así es como se verá tu navegador si intentas Courier New , Courier , Mono :

CSS y fuentes

En la próxima lección, aprenderás sobre los colores de las fuentes.

Estilos en línea e incrustados | Colores de la fuente

Recomendado para ti