Crear un paquete de fuentes web
Selecciona fuentes TTF, OTF, WOFF o WOFF2 para crear archivos WOFF2, CSS y una vista previa HTML. Antes de integrarlas en un sitio web, comprueba el texto de ejemplo, el nombre, el peso, el estilo y la visualización durante la carga definidos en CSS; después, guarda el paquete como ZIP. No se crean subconjuntos de caracteres.
Qué puedes hacer
Agrupar archivos para la web
Crea archivos WOFF2, CSS y una vista previa HTML a partir de TTF, OTF, WOFF o WOFF2. Puedes seleccionar varias fuentes a la vez.
Revisar los glifos y la configuración CSS
Comprueba el aspecto de las fuentes convertidas. Si es necesario, cambia los nombres, los pesos y los estilos usados en la web, así como la visualización durante la carga.
Compartir el conjunto como ZIP
Guarda juntos la carpeta fonts, fonts.css y preview.html. Úsalos conservando sus ubicaciones relativas.
Cómo usarla
Seleccionar varias fuentes a la vez
Selecciona fuentes que puedas usar en la web. Si usas varias, selecciónalas todas a la vez.
Comprobar el aspecto y la configuración web
Introduce texto de vista previa y comprueba cada fuente. Para ajustar su nombre, peso u otras opciones, abre la configuración CSS de esa fuente.
Crear el paquete y guardar el ZIP
Haz clic en «Crear paquete de fuentes web» y guarda el webfont-kit.zip generado.
Extraer y añadir a una página web
Extrae los archivos conservando las ubicaciones de la carpeta fonts, fonts.css y preview.html. Carga el CSS en la página donde usarás las fuentes y emplea los nombres de fuente indicados.
Cuándo resulta útil
Preparar un sitio web para su publicación
Agrupa tus fuentes en formatos web y CSS para preparar los archivos necesarios para integrarlas.
Entregar el conjunto completo al equipo de producción
Agrupa varias fuentes, como las normales y las negritas, y entrégalas con HTML que incluya texto para comprobarlas.
Cómo funcionan conjuntamente las fuentes y CSS
WOFF2 es un formato de fuente para la web
Prepara WOFF2 con los caracteres originales. No se crean subconjuntos de caracteres. El tamaño del archivo varía según la fuente.
Registrar nombres, pesos y estilos en CSS
Esta configuración determina qué estilos solicitados usarán esta fuente en la web. No modifica los glifos para convertirlos en negrita o cursiva.
Distinguir el mismo nombre por peso y estilo
Los estilos normal y negrita pueden usar el mismo nombre, pero no se puede duplicar la combinación de nombre, peso y estilo.
Elegir la visualización durante la carga
De forma predeterminada, primero se muestra una fuente alternativa y se cambia a la fuente elegida cuando está lista. Si es necesario, puedes cambiar el tiempo de espera y el comportamiento de cambio en la configuración CSS.
Conservar las ubicaciones relativas de los archivos
fonts.css hace referencia a archivos como fonts/font-1.woff2. Si mueves la carpeta o el archivo CSS, ajusta las rutas de referencia correspondientes.
Preguntas frecuentes
¿Dónde debo colocar los archivos generados?
Extrae el ZIP y coloca la carpeta fonts, fonts.css y preview.html conservando sus ubicaciones relativas. Carga fonts.css desde tu página y usa en CSS el nombre de fuente especificado.
¿En qué se diferencia de una conversión de formato normal?
Esta pantalla reúne WOFF2, CSS y una vista previa HTML. Si solo quieres cambiar el formato de la fuente, usa «Conversor de formato de fuentes».
¿Puedo conservar solo los caracteres que uso?
Esta pantalla no crea subconjuntos de caracteres. Prepara fuentes que conservan los caracteres originales.
¿Cambiar el peso hace que los caracteres aparezcan más gruesos?
La configuración indica el valor de peso que se usa en CSS. No modifica los glifos del archivo de fuente. Para usar negrita o cursiva, proporciona un archivo que contenga esos glifos.
¿Puedo usar varios archivos con el mismo nombre de fuente?
Puedes registrar archivos con distintos pesos o estilos. Si se duplica la misma combinación de nombre, peso y estilo, revisa la configuración correspondiente.
¿Qué ocurre si vuelvo a seleccionar fuentes?
Se eliminan el conjunto de fuentes actual y el ZIP generado, y se carga el nuevo conjunto seleccionado. Selecciona también los archivos que quieras seguir usando junto con los nuevos.
¿Qué pasa si no se muestran todos los caracteres de ejemplo?
Los caracteres que no estén incluidos en la fuente pueden mostrarse con otra tipografía. Comprueba los caracteres compatibles y su aspecto en el lugar donde se usará la fuente.
¿Qué pasa si no se puede cargar una fuente?
Vuelve a seleccionar fuentes en un formato compatible. Si no se puede convertir o cargar algún archivo del conjunto, no se guarda un conjunto parcialmente correcto.
Entrada y resultados
- Entrada
- TTF, OTF, WOFF y WOFF2. Puedes seleccionar varios archivos a la vez.
- Condiciones
- Comprueba las condiciones de uso de las fuentes de entrada, incluida su incorporación en sitios web.
- Configuración
- Nombres, pesos, estilos y visualización durante la carga que se usan en CSS.
- Salida
- webfont-kit.zip. Incluye WOFF2, fonts.css y preview.html.