GoogleWebFonts FontFamilyPreviewImages

Fuentes web de Google - Imágenes de vista previa de Font Family

Este repositorio contiene imágenes que son representaciones de todas las diferentes fuentes de Google. Necesitábamos esto para nuestra plantilla de aplicación, ya que permitimos que nuestros usuarios busquen en Google Fonts (a través de su API). Pero (obviamente) queríamos/necesitábamos proporcionarles una vista previa de cómo era la fuente.

Podríamos haber cargado las fuentes en la memoria y luego mostrarlas, pero eso no parecía ideal.

Nota

Si está interesado en una versión alojada de la captura de pantalla que ve a continuación (permitiendo que sus usuarios activen un modal y un botón de clic burbujeando un evento que contiene la URL del archivo woff2 correspondiente), hágamelo saber: [email protected]

Captura de pantalla de cómo nuestra aplicación usa las imágenes en este repositorio:

¿Por qué hay tantos archivos?

Si bien Google Fonts actualmente proporciona miles de variaciones de fuentes diferentes, hay muchas más imágenes reales. Esto se debe a que Google Fonts actualiza rutinariamente las fuentes de una versión a otra (por ejemplo, V5 a V6). Luego volvemos a renderizar las imágenes para garantizar que la vista previa que mostramos a nuestros usuarios sea precisa.

Decidí dejar esos archivos en el repositorio por el bien de la posteridad: nunca se sabe lo que la gente necesitará :)

Tallas

Por el momento, solo proporciono imágenes de vista previa que tienen un valor font-size de 48px . El ancho respeta el ancho nativo de la fuente. Para garantizar una pantalla nítida, le sugiero que le dure el pulgar de vista previa a una altura máxima de 24px .

Convención de nombres de archivos:

Dos ejemplos: ABeeZee-400.v10.png y Cabin-400italic.v10.png
El formato es bastante sencillo:

• El nombre de la fuente (no se eliminan los caracteres no hyphens, no alfabéticos y no numéricos)
• Un tablero ( - )
• El peso de la fuente
• Si la fuente es una versión en cursiva, después de la fuente, se agrega la palabra italic
• El número de versión, precedido por la letra v

La expresión regular que uso para eliminar los caracteres de nombre es: /[^A-Za-z0-9-]/