¿Qué es una fuente web?

Logotipo de Google Fonts sobre fondo azul

¿Sabía que su navegador web descarga y usa automáticamente fuentes que no están instaladas en su sistema? Las fuentes web ayudan a que las páginas que navega todos los días se vean mejor. Esto es lo que son y cómo funcionan.

Fuentes de escritorio frente a fuentes web

Todos usamos fuentes todos los días. Algunos de ellos vienen con su sistema operativo , otros provienen de aplicaciones como Adobe Creative Suite o Microsoft Office, y algunos son los que usted descarga o compra e instala usted mismo . Una vez instaladas, puede utilizar estas fuentes en procesadores de texto, software de edición de imágenes y más. Estas son fuentes de escritorio y se almacenan localmente.

Un ejemplo de fuentes de escritorio.
PixieMe / Shutterstock

Otro tipo de fuente se ha vuelto más importante a medida que nuestra experiencia informática se ha movido en línea. Estas son fuentes web: tipografía almacenada en la nube (y luego almacenada en caché en su navegador) y utilizada para generar el texto que aparece en los sitios web.

Una breve historia de las fuentes web

En los primeros días de Internet, la tipografía en las páginas web se limitaba a las fuentes instaladas en su sistema. Si no se instaló una fuente, la página web cargaría una fuente «alternativa» estándar que era más probable que estuviera disponible. Debido a esto, los diseñadores web a menudo eligen fuentes de sistema predeterminadas para sus sitios.

Entre ellos se encuentran Core Fonts for Web de Microsoft , un conjunto de tipos de letra disponibles gratuitamente para el diseño web. Este paquete incluía fuentes del sistema ampliamente utilizadas como Times New Roman, Arial, Comic Sans y Trebuchet. Alternativamente, los diseñadores pueden usar familias de fuentes como Serif, Sans-Serif y Monospace para especificar el estilo general de una fuente, incluso si una específica no está disponible.

Relacionado:  Cómo cambiar el icono de tu coche en Google Maps

Esto cambió en 2010 cuando Google lanzó  Google Fonts , un vasto repositorio de código abierto para fuentes gratuitas que se puede usar en cualquier lugar de la web. Desde entonces, han surgido otros competidores, como Typekit de Adobe y los complementos de fuentes alojados en la web. Millones de sitios web de todo el mundo funcionan con fuentes web, incluido el paquete de productividad de Google .

Cómo funcionan las fuentes web

El mayor proveedor de fuentes web, Google Fonts, es una biblioteca web expansiva de más de mil fuentes. Puede usarlos en su sitio web extrayéndolos a través de CSS, y los desarrolladores móviles pueden acceder a estas fuentes al crear aplicaciones de Android.

Cuando una página web utiliza Google Fonts, extrae una fuente de la base de datos de Google y luego le muestra el texto en esa fuente en su navegador. Estas fuentes están alojadas en el servidor de Google y se cargan casi instantáneamente. Otros servicios de fuentes en la nube funcionan de la misma manera.

Otra alternativa es utilizar fuentes incrustadas y alojadas en la web. Esto se hace a través del Web Open Font Format (WOFF), un archivo de fuente comprimido desarrollado por Mozilla que es compatible con la mayoría de los navegadores web modernos. WOFF es útil si desea incrustar una fuente personalizada que no está disponible en un servicio de fuentes web.

Obtener fuentes web

Roboto Open Sans sobre fondo negro

El repositorio de fuentes de Google y todas las fuentes que se encuentran debajo son de uso totalmente gratuito y accesibles para todos. Solo usa fuentes bajo una licencia abierta, y muchas de estas fuentes se han convertido en elementos básicos del diseño web, como Roboto, Lato y Montserrat. Google aloja un sitio web que enumera todas las fuentes disponibles y le permite probarlas y compararlas entre sí. Google también ofrece una base de datos de iconos vectoriales gratuitos.

Relacionado:  ¿Qué significa OFC y cómo se utiliza?

Dado que estas fuentes están disponibles gratuitamente, también puede descargar los archivos de fuentes originales para usarlos en su escritorio . Muchos sitios web alojan repositorios de Google Fonts, incluido el propio Github de Google . Puede utilizar estas fuentes en proyectos, compartirlas libremente con otras personas y descargarlas de otros lugares de Internet de forma gratuita.

Muchos creadores de sitios web y administradores de contenido como WordPress y Squarespace vienen con soporte para fuentes web listas para usar. Si está utilizando un sitio web personalizado, debe cargar el archivo de fuente en su servidor y usar el código CSS para señalar el archivo de fuente que desea usar.

Si desea obtener más información sobre el uso de fuentes web para su sitio web, consulte esta Guía de fuentes web CSS de W3Schools.