Actualmente prácticamente cualquier empresa tiene una página web, y cada vez son más los particulares que tienen su propio portal o blog. En un mundo en el que cualquiera puede abrir un portal sencillo con tan solo saber usar Google, el diseño de los sitios web puede marcar la diferencia.

El diseño de los sitios web, cada vez es más estilizado y más cuidado. Se utilizan multitud de recursos (imágenes, capas flotantes, efectos con JavaScript…) para que la experiencia para el usuario sea lo más agradable posible. Sin embargo, cuando diseñamos un sitio web tenemos que tener especial cuidado con las tipografías, ya que una página web puede ser visitada desde cualquier sistema operativo (Windows, Linux, Mac, y cada vez más, dispositivos móviles). Es por esto que tenemos que intentar que la fuente que escojamos sea una fuente «de sistema», que venga instalada por defecto en todos estos equipos. O por lo menos así era…

Las fuentes compatibles con todos los sistemas operativos nos son muchas, y al final están muy vistas, son siempre las mismas. Por ello vamos a analizar una serie de métodos que podemos usar para usar más fuentes en nuestros sitios web.

Añadiendo un archivo de fuente (TTF) a nuestro sitio.

Probablemente sea el método más sencillo, ya que nos permite incluir cualquier fuente que hayamos descargado de internet. Debemos subir el fichero *.ttf a nuestro servidor, y posteriormente en la hoja de estilos de la página lo añadiremos con el siguiente código:

Posteriormente, cuando queramos usar la fuente que hemos subido, la asignaremos en los estilos como hacemos habitualmente con la propiedad font-family. Con el nombre que le pusimos en el código anterior.

Siguiendo este método, el archivo con la fuente queda alojado en nuestro servidor y es descargado cuando el cliente visita la página web.

Utilizando un servicio web para cargar las fuentes.

Cada vez son más las páginas que utilizan fuentes personalizadas, y empiezan a aparecer algunos servicios web que nos permiten incluir diversas fuentes en nuestros sitios. Este es el caso de por ejemplo Google Web Fonts o Fonts.com Web Fonts. En este caso explicare como funciona el servicio de Goole.

Google Web Fonts

Google Web Fonts · Filtros En está primera página, veremos un listado con las fuentes. En caso de que no hayamos realizado ninguna búsqueda, se mostrarán todas las fuentes. Si por el contrario hemos añadido algún filtro (están disponibles en la parte izquierda de la página) se mostraran solo las fuentes que cumplan los criterios del filtro.

Una vez que demos con la imagen que deseamos usar, veremos un link «Quick-use». Este enlace nos llevará a una página detallada de la fuente, donde podremos elegir una serie de opciones para incluirla en nuestra web.

Google Web Fonts · Tiempo Carga Las opciones disponibles nos permiten elegir los estilos (bold, italic, normal…) y el juego de caracteres que está disponible (Latin, o Latin extended). Conforme vamos eligiendo las distintas opciones, se nos informa del impacto en el tiempo de carga de la página.

Debemos saber, que cuantos más estilos incluyamos para la página, y mayor sea el juego de caracteres que permitimos incluir, mayor será el tiempo de carga. Por lo que recomiendo que incluyamos únicamente los estilos que vamos a usar, y que si no vamos a usar ningún carácter extraño, solo incluyamos el juego de caracteres básico.

En último lugar, se nos muestra el código a usar para insertar la fuente. Nos da tres opciones:

  • Incluir la fuente como si de un CSS externo se tratase: <link href=’http://fonts.googleapis.com/css?family=Alegreya+SC:400,700italic’ rel=’stylesheet’ type=’text/css’>
  • Incluir la fuente mediante un @import desde nuestras hojas CSS: @import url(http://fonts.googleapis.com/css?family=Alegreya+SC:400,700italic);
  • Mediante Javascript:

Cuando queramos usar esta fuente en nuestra página web, solo debemos asignarla por CSS como cualquier otra fuente: font-family: ‘Alegreya SC’, serif;

Como vemos, es muy sencillo incluir más fuentes en nuestro sitio web, y las opciones de darle un aspecto distinto. Has elegido ya que fuente usaras en tu próximo proyecto?[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]