Tipografías web: formatos necesarios

4 abril, 2018 Deja un comentario

Tu tipografía igualmente visible en todos los navegadores web y dispositivos

No serás el primero ni el último que desea averiguar porqué cuando subes una tipografía en formato TTF u OTF a tu alojamiento web… ésta no se muestra igual en todos los navegadores web ni dispositivos.

¡Ah amigo! E ahí la cuestión… ¿Qué cuestión? Pues que se necesitan unos formatos apropiados para los diferentes navegadores web que hay en los diferentes dispositivos: ordenador de sobremesa, portátil, tablet, smartphone.

Estás en el sitio indicado si alguna vez has pensado en alguno de estos supuestos:

  • Quieres incluir una fuente o tipografía que no estuviera en Google Fonts
  • Quieres subir una tipografía a tu alojamiento web para no depender de terceros (Google Fonts)
  • Tienes un cliente que te ha pedido incluir una tipografía exclusiva, ya que la ha comprado
  • Quieres ver la misma tipografía en todos los navegadores web y diferentes dispositivos

Si has pensado en alguna de estas ideas u otras en la misma dirección… estás de enhorabuena, porque precisamente eso es lo que voy a tratar en este artículo. Algo que ya te dejaba caer de pasada en el anterior:
– Tipografías gratis: dónde descargarlas o vincularlas (en el cual puedes ver no solo dónde descargar tipografías, sino el formato recomendable)

No obstante, no te bastara con saber los formatos que se necesitan, sino también cómo encontrarlos. Para ello, te puedes servir de herramientas online, las cuales generan dichos formatos sirviendo de base los ya conocidos TTF u OTF.

Si no tienes ganas de leer, siempre puedes ver el vídeo artículo-tutorial.

Formatos necesarios para ver bien tu sitio web en dispositivos y navegadores

Portada-TipografiasWeb_

Formatos tipografía web

TTF/OTF

Este formato ha sido admitido por todos los principales navegadores, pero las fuentes TTF funcionan en IE 9 y posteriores solo cuando han sido instaladas en el dispositivo.

Uso más limitado a ordenadores de sobremesa o portátiles, ya que tablets/smartphones no permiten instalación de tipografías. Y del mismo modo, dependes de que el usuario la tenga instalada en su dispositivo.

WOFF / WOFF2 (el mejor)

Desarrollado por Mozilla en conjunto con otras organizaciones, las fuentes WOFF a menudo cargan más rápido.

Fue desarrollado durante 2009 y ahora es una recomendación del Consorcio de World Wide Web (W3C).

Este formato parece ser el ganador y hacia donde se dirigen todos los navegadores.

WOFF2 es la próxima generación de WOFF. El nuevo formato de compresión de fuente web WOFF 2.0 ofrece una ganancia media del 30% sobre WOFF 1.0 (hasta un 50% + en algunos casos). Esto es que carga más rápido en tu sitio web, debido a su compresión.

Si deseas que los navegadores web más nuevos usen WOFF2, debes disponer la declaración de WOFF2 por encima de la de WOFF.

SVG

Mayor desventaja frente a otros formatos: las fuentes SVG siempre se descomprimen y generalmente son bastante grandes.
No son compatibles con Firefox, IE, IE Mobile y Opera Mini. Por lo que también quedó en desuso en Chrome. Por este motivo, es de uso limitado.

EOT

Este formato fue creado por Microsoft (los creadores de @font-face) hace más de 15 años. Es el único formato que reconocerán versiones anteriores a IE9.

Dispositivos y navegadores donde verás tu sitio web

Ahora que ya sabes que formatos hay, tienes que distinguir dónde se verá uno u otro dependiendo del navegador web elegido y su versión, así como el dispositivo que uses para ver el sitio web.

A continuación, te muestro 2 cuadros con una leyenda informativa, los cuales han sido realizados por el equipo de la herramienta online Transfonter (la cual veremos más adelante).

Dispositivos: ordenador de sobremesa y portátil

Leyenda-Info-TipografiasWeb-Desktop-ByTransfonter_
Leyenda informativa: Tipografías web en ordenadores sobremesa y portátiles (By Transfonter)

Dispositivos: tablet y smartphone

Leyenda-Info-TipografiasWeb-Mobile-ByTransfonter_.
Leyenda informativa: Tipografías web en tablets y smartphone (By Transfonter)

Cómo generar esos formatos web a partir de los formatos TTF u OTF

Claro hasta aquí todo parece muy interesante, ¿verdad? Pero te preguntarás cómo es posible conseguir esos formatos web, si todos los sitios desde dónde descargas tipografías gratis solo te ofrecen los formatos TTF u OTF.

Muy fácil. Gracias a ciertas herramientas online, las cuales generan esos formatos web.

A continuación, te muestro las más utilizadas:

Vídeo artículo y tutorial

  • Tipografías web: formatos necesarios
    Qué tipo de formato usa una fuente/tipografía en un sitio web. Hasta 6 formatos diferentes, cada cual más optimizado para el tipo de navegador web que se use en los diferentes dispositivos. Con el fin de ver tu sitio web de igual modo en todas partes.

Opinión

Si hay algo que deja huella en un sitio web es la tipografía elegida. Ya hemos visto en anteriores artículos cómo descubrir qué tipografía utiliza un sitio web que te guste.

Tienes varios artículos relacionados ya con la tipografía. Yo mismo estoy pensando en cambiarla, a raíz del nuevo sitio web que espero poder lanzar algún día, y del cual tienes un adelanto en mi curso realizado para Udemy, en el cual toco temas de marketing, copywriting y coaching (citando a los expertos de cada campo).

Espero que te haya resultado de utilidad este artículo, y lo pongas en práctica en tu sitio web cuando antes. Y recuerda hacer bueno uso de las tipografías, no más de 3 diferentes. Una para el título, otra para el subtítulo y una tercera para el contenido de la web, a poder ser legible (aspecto que yo mismo debo cambiar en ésta).

Antes de terminar quiero agradecer a los sitios web de los cuales me he ayudado para realizar este artículo: Transfonter y Developers Google.

icono cafe¿Te ha resultado útil y quieres invitarme a un café?

Sí, sí… hay formatos para dar y tomar. Pero ahora ya… ¿te quedan más claras las diferencias entre unos y otros? ¿Cuáles vas a elegir?