Utilizar cualquier tipografía en un sitio web

Gracias a la regla @font-face de CSS3 es posible utilizar cualquier tipografía en un sitio web. Aquí te explico como hacerlo paso a paso.

Utilizar tipografías en CSS es maravilloso. Nos permite personalizar una página web con fuentes elegantes y atractivas.

Sin embargo, originalmente, este sistema tenia una pequeña falla en su concepto: dependemos de que la tipografía que elegimos esté instalada en el sistema de nuestro visitante.

Si utilizamos la propiedad font-family y especificamos una tipografía que no está instalada en el sistema, el navegador web, pasará a utilizar otra tipografía alternativa.

Hacer que el usuario tenga que instalar la tipografía antes de visitar nuestro sitio web, NO es una opción. Por lo tanto, se ideó una forma para que los navegadores puedan precargar tipografías sin que el usuario tenga que instalarlas previamente.

Tipografías no instaladas

Una primera aproximacion para resolver este problema, seria el siguiente:

.contenedor {
  font-family: Tahoma, Georgia, sans-serif;
}

• Un usuario con la tipografía Tahoma instalada en su sistema, vería sin problemas el diseño original.
• Si no tiene la tipografía Tahoma instalada en el sistema, vería el sitio con la segunda opción, la tipografía: Georgia.
• Y si tampoco tiene la tipografía Georgia instalada, simplemente buscará una tipografía del sistema «sin serif».

Utilizar Google fonts. Si o No?

Aunque utilizar tipografías de Google Fonts con el código que nos proporciona Google es una opción viable, y una solución mucho mas practica, en temas de rendimiento web suele ser mucho peor.

Cuando utilizamos el código que nos proporciona Google Fonts, en realidad, también estamos usando la regla @font-face, lo que ocurre es que el camino del navegador para llegar hasta la tipografía es «más largo».

• Buscar (resolver) el dominio fonts.googleapis.com
• Descargar y procesar el CSS desde fonts.googleapis.com
• Buscar (resolver) el dominio fonts.gstatic.com (donde están las fuentes alojadas)
• Descargar y procesar las fuentes de dicho dominio

Sin embargo, si descargamos la tipografía a nuestro sitio web, el navegador no tendrá que gastar tiempo y recursos en resolver esos dominios. El CSS no se descarga desde otra URL porque ya está en nuestro código CSS principal, y las tipografías las descargará desde nuestro dominio.

La regla @font-face. Utilizar cualquier tipografía en un sitio web

Para solucionar, definitivamente, el problema de utilizar una tipografía que el usuario no tiene instalada en su sistema, utilizaremos la regla @font-face de CSS.

Esta regla nos permite descargar en el navegador una tipografía desde la página y utilizarla aunque no esté instalada en el sistema del visitante. Todo ello de forma transparente al usuario.

En el siguiente ejemplo, precargamos la tipografía Open Sans, utilizando la regla CSS @font-face. Esta regla suele colocarse al principio del archivo CSS para avisar al navegador que vamos a utilizar una tipografía que es muy posible que no se encuentre instalada.

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src:
    local("Open Sans"),
    url("/fonts/opensans.woff2") format("woff2"),
    url("/fonts/opensans.woff") format("woff"),
    url("/fonts/opensans.ttf") format("truetype");
}

Básicamente, abrimos un bloque @font-face, establecemos su nombre mediante font-family (en este caso uso Open Sans, tal el nombre de la tipografía, pero aquí puedo darle el alias que quiera para invocarla en cualquier lugar).

Además podemos indicar otras características, como el tamaño, el estilo y demás propiedades.

La clave viene a la hora de indicar la ruta del directorio donde se encuentra la tipografía a utilizar, que se hace mediante la propiedad src.

Luego de indicar la url() donde se encuentra el archivo con la tipografía, es conveniente indicar el formato de la misma, para que el navegador lo conozca antes de descargar la tipografía.

La sintaxis a utilizar sería la siguiente:

Como puedes ver, la regla @font-face permite utilizar cualquier tipografía en un sitio web de una forma simple. Y combinado con las fuentes gratuitas que se consiguen en Google Fonts, son una herramienta muy poderosa para darle vida y personalidad a nuestros sitios web.

Si te gustó o te entretuvo el contenido de este posteo, haciendo un click en los avisos me ayudas a mantener el sitio con vida y a seguir publicando.

Y si quieres ganar algo de dinero sin esfuerzo, registrate en IPRoyal desde este banner y recibí 1 dolar de regalo al comenzar a usar la aplicación para generar ingresos pasivos.

Acá puedes conocer más sobre ingresos pasivos, que es y como funciona IPRoyal Pawns.