Cómo poner tus propios archivos de fuentes de CSS con font-face

Para poder darle un estilo único al tipo de fuente de una página web se hace uso de la regla @font-face de CSS. Esta regla permite utilizar fuentes propias sin necesidad de limitarse a las que tienen los usuarios en su computadora y no requiere que los usuarios descarguen las fuentes para poder ver la página apropiadamente, ya que estas se cargan desde el archivo de la fuente que se encuentre en el servidor.

@font-face funciona de la siguiente manera:

En el src se especifica la ubicación remota del archivo de fuente. Aunque también se puede utilizar el nombre de una fuente que se encuentre en la computadora del usuario usando en lugar de url(“ubicación-del-archivo-de-fuente”) la siguiente regla: local(“nombre-de-la-fuente”).

Reglas de CSS para fuentes con font-face

Se puede además especificar las reglas que se utilizan para dar estilo a las fuentes en CSS que ya existen:

Lo primero que se tiene que hacer es descargar la fuente de su elección y guardarla dentro de la carpeta donde se encuentra su página web, en este ejemplo la fuente que utilicé la guarde dentro de la carpeta css en la que se encuentra mi hoja de estilos. Una vez hecho esto en la hoja de estilos (o etiqueta style) se declara la regla:

Ahora solo queda aplicarla al selector que queramos, en este caso lo aplico a la etiqueta body para que todo el contenido de mi página tenga este tipo de letra:

Puedes encontrar el ejemplo completo en https://github.com/pilaralejandra/fuentes-CSS

Soporte y compatibilidad en browsers para font-face

La regla @font-face es soportada en los navegadores Internet Explorer, Firefox, Opera, Chrome y Safari. Pero hay que tomar en cuenta que no todos los formatos de las fuentes son soportados en estos navegadores. En estos casos se sugiere agregar una fuente alternativa para los navegadores que no lo soportan.