Generador de @font-face Base64
Incrusta una fuente directamente en tu CSS como un data URI Base64, así la página no necesita una petición de archivo de fuente separada. Suelta un archivo TTF, OTF, WOFF o WOFF2 y la regla @font-face lista para pegar se genera por ti.
Cómo usarlo
Elige un archivo de fuente y define el nombre de familia, el peso y el estilo. La regla @font-face aparece con la fuente incrustada como data URI, y la vista previa de abajo muestra la fuente renderizándose de verdad. También puedes pegar una cadena Base64 directamente si ya tienes una.
- Soporte de TTF, OTF, WOFF, WOFF2 y EOT
- Arrastrar y soltar o explorar en busca de un archivo
- Vista previa en vivo usando la fuente incrustada
- font-display y unicode-range opcionales
- Aviso de tamaño para incrustaciones pesadas
Cuándo incrustar una fuente
Incrustar elimina un viaje de ida y vuelta de red y garantiza que la fuente está disponible, lo que encaja con fuentes de iconos pequeñas, una única fuente de display, o HTML sin conexión y de correo. Es una mala elección para familias grandes: Base64 infla un archivo en aproximadamente un tercio, y toda la carga va dentro del CSS, así que no se puede almacenar en caché por separado ni transmitir en streaming.
Herramientas de imagen y color relacionadas
También te puede interesar
Herramientas de otras categorías que suelen combinarse con Font-face en Base64: