PerfectVector
Por Irene Kim10 min de lectura

Importar SVG en FontForge: convierte formas dibujadas en contornos de glifos

Importa una ilustración SVG en una casilla de glifo de FontForge y revisa contornos, línea base, escala y espaciado. Aprende qué aporta el trazado y qué sigue requiriendo diseño tipográfico.

En esta página

Para importar un SVG en FontForge, abre la casilla del glifo deseado, elige File → Import, cambia el formato a SVG y selecciona el archivo. El resultado es geometría de contornos en la ventana de edición del glifo. Antes de generar una fuente utilizable, todavía debes revisar su posición, tamaño, contornos y espaciado.

Esta diferencia importa cuando el original es un dibujo. El trazado puede recuperar formas a partir de píxeles. No puede determinar la línea base prevista, el ancho de avance ni el ritmo de espaciado de una tipografía. Empieza con un glifo y termina esas comprobaciones antes de importar un alfabeto.

Importa en una casilla de glifo, no solo en una ventana de fuente abierta

Crea un documento nuevo de FontForge o abre la fuente en la que trabajas y haz doble clic en la casilla del carácter que quieras editar. Importa el SVG desde File → Import dentro de esa ventana de contornos. Si el selector muestra inicialmente formatos de mapa de bits, cambia su filtro de formato a SVG. Esta es la secuencia del tutorial de importación de contornos de FontForge.

Comprueba primero el destino. Si añades una g minúscula original, confirma que editas la casilla de g prevista. Un archivo llamado g.svg no sustituye la comprobación del glifo y su asignación de carácter. Guarda una copia de una fuente existente antes de reemplazar contornos.

Después de importar, selecciona un punto y confirma que tienes contornos editables. Si solo tienes una imagen que sirve de referencia para trazar, no has obtenido el mismo resultado. La documentación del menú File de FontForge distingue las importaciones de imágenes, los contornos de glifos y las operaciones con archivos de fuentes.

En esta guía, el objetivo es un glifo de contornos convencional. Los flujos especializados de fuentes multicapa o de color tienen requisitos adicionales; una ilustración preparada para el navegador tampoco se convierte automáticamente en ese tipo de fuente.

Utiliza los vectores originales cuando los tengas

Si dibujaste el glifo en un editor vectorial, prepara directamente esa ilustración. Conserva sus contornos originales, crea una copia independiente para importar y simplifica en ella las funciones de presentación no admitidas. Volver a trazar una imagen de vectores existentes puede alterar formas que ya controlas.

Si el original es un dibujo ráster o un símbolo generado, convierte la imagen en trazados vectoriales con PerfectVector y revisa el SVG. Así obtendrás un contorno inicial para editar. FontForge sigue siendo la herramienta para definir las métricas, el espaciado y el comportamiento del glifo en la fuente.

Para un diseño dibujado a mano, elige un original claro y de alto contraste. Recorta los caracteres vecinos y las marcas del papel, pero conserva el ascendente o descendente completo. La guía de vectorización de letras dibujadas a mano cubre la preparación del original; la explicación de la vectorización de imágenes describe lo que produce realmente la conversión.

Una letra trazada sigue siendo geometría de una ilustración

Preparamos una g minúscula ráster original con un espacio interior amplio y un descendente claro, y después la convertimos mediante PerfectVector. El SVG sin procesar contenía tres trazados cerrados: un fondo del lienzo casi blanco, una silueta negra de la letra y una forma casi blanca para el espacio interior. No tenía imágenes incrustadas.

El espacio interior blanco estaba pintado sobre la silueta negra. No era ya un contorno interior de un glifo de fuente terminado. Quitar solo la forma blanca dejaría visible el negro sólido que hay debajo. En la copia de importación, elimina el fondo verificado y prepara el espacio interior como una abertura real antes de evaluar el relleno del glifo.

Una g minúscula ráster preparada junto a la salida SVG real con tres trazados cerrados y un espacio interior blanco pintado, con los contornos SVG en azul
Glifo ráster original preparado y salida SVG real de PerfectVector. El archivo sin procesar tiene tres trazados, incluidos el fondo y el espacio interior pintado. No se muestra una importación en FontForge ni una fuente terminada. Las líneas azules se superponen a los trazados SVG reales para revisarlos; se omiten los contornos del fondo.

La comparación muestra los contornos que revisamos, no una prueba de FontForge. No asignamos una línea base, un tamaño em, un ancho de avance ni kerning (ajuste entre pares de letras) a esta salida. Un descendente de aspecto limpio indica hasta dónde se extiende el dibujo; no indica a la fuente dónde debe estar la línea base.

Prepara contornos explícitos antes de ajustar las métricas

Conserva un SVG intacto y una copia de trabajo independiente. En la copia, elimina las formas de fondo que no correspondan, expande los trazos cuando su grosor visible defina el glifo y convierte las máscaras o los efectos recortados en las formas que quieras conservar. FontForge importa un subconjunto de SVG, como explica su referencia de importación.

Para una letra con un espacio interior, revisa tanto el límite exterior como el interior. Deben describir la región con relleno prevista. Una superposición blanca puede imitar la apariencia sobre una página blanca sin dar a la fuente la estructura correcta de contornos.

Después de importar la ilustración preparada, busca extremos abiertos, superposiciones accidentales y autointersecciones. Element → Correct Direction establece direcciones alternas para los contornos exteriores y anidados, pero puede producir resultados inesperados cuando las curvas se cruzan. Resuelve esos cruces antes de confiar en el comando. FontForge documenta esa limitación en su referencia del menú Element.

Evita simplificar solo para alcanzar un número de nodos. Conserva las esquinas, las terminaciones y las curvas que definen tu dibujo. La guía sobre el exceso de nodos SVG puede ayudarte a diagnosticar contornos con ruido, pero un contorno de fuente también requiere criterio tipográfico a los tamaños en que se leerá.

Alinea la línea base antes de valorar la altura

La ilustración importada puede llegar demasiado pequeña, demasiado grande o desplazada respecto al origen previsto. Selecciona todos los puntos del glifo y muévelos o escálalos juntos. El tutorial de importación de FontForge describe cómo colocar el contorno y utilizar Element → Transform → Transform con una escala uniforme.

En la g minúscula, no alinees el punto más bajo con la línea base: ese punto pertenece al descendente. Coloca el cuerpo de la letra respecto a la línea base y la altura de x previstas, dejando el descendente por debajo. Compáralo con los glifos minúsculos vecinos del mismo diseño si ya existen.

Utiliza un sistema coherente de coordenadas de origen al preparar más letras. El tutorial de FontForge propone un flujo de 1,000 unidades, mientras que la guía de importación de Design With FontForge explica cómo se relacionan las coordenadas verticales de un SVG con el ascenso y el descenso. Trátalas como instrucciones coordinadas de configuración, no como una regla que obligue a estirar cada SVG existente hasta formar un cuadrado.

Una fuente con distintas unidades por em necesita un plan acorde. Del mismo modo, recortar cada letra ajustadamente en una página SVG de altura diferente puede eliminar la referencia compartida que necesitas para colocarlas de forma coherente. Establece esa referencia con uno o dos glifos antes de procesar el resto.

Ajusta el espaciado en contexto

El ancho visible de la letra y su ancho de avance son distintos. El avance indica al siguiente carácter dónde empezar; el espacio vacío alrededor del contorno contribuye al ritmo de una palabra.

Abre la ventana Metrics desde el menú Window y revisa el glifo junto a otras letras. El tutorial de métricas de FontForge describe cómo cambiar el espacio lateral izquierdo moviendo el contorno y el derecho mediante la línea de ancho de avance.

Para una primera g, compara letras repetidas y combinaciones breves con glifos ya dibujados, como gg, ng y go. Observa los espacios, no solo los contornos. No utilices el kerning para compensar todos los espacios laterales predeterminados mal elegidos; establece primero un espaciado razonable entre vecinos habituales y después aborda los pares excepcionales.

Un glifo que parece centrado en una página SVG puede quedar mal colocado dentro del texto. A la inversa, un espacio numéricamente igual a ambos lados no siempre se ve correcto. Conserva los límites del SVG como referencia geométrica y valora la fuente en una línea de texto.

Valida y genera una fuente de prueba

Guarda el proyecto editable de FontForge antes de generar un archivo de fuente. Save conserva el archivo de trabajo; Generate Fonts crea un formato de fuente como TrueType u OpenType. El tutorial de comprobación y generación explica esa separación.

Ejecuta Element → Find Problems en los glifos preparados. Revisa los problemas señalados en lugar de aceptar automáticamente cada cambio sugerido: FontForge advierte que algunos resultados pueden reflejar decisiones de diseño intencionadas. Después, vuelve a revisar visualmente los glifos.

Genera una fuente de prueba y úsala en la aplicación de destino. Comprueba la asignación de caracteres, el espacio interior, la línea base, el espacio libre del descendente y el espaciado tanto en tamaños de texto pequeños como grandes. Si la fuente sigue siendo un prototipo pequeño, deja claro ese alcance de prueba. Importar correctamente un contorno no demuestra que toda la tipografía esté terminada.

Preguntas frecuentes

¿Por qué mi SVG tiene un tamaño o una posición incorrectos en FontForge? Sus coordenadas de origen y dimensiones de página quizá no coincidan con la configuración del em y la línea base de la fuente. Mueve y escala el contorno importado de forma coherente y establece un plan compartido de coordenadas antes de preparar más glifos.

¿PerfectVector puede convertir un dibujo en una fuente completa? PerfectVector convierte ilustraciones ráster en trazados vectoriales. Todavía necesitas un editor de fuentes para preparar los contornos, las asignaciones de caracteres, las métricas, el espaciado y el archivo de fuente generado.

¿Por qué se rellena el espacio interior de la letra? Comprueba si la abertura aparente es una superposición blanca, si existe el contorno interior y si hay que corregir las direcciones de los contornos o sus cruces. Revisa el relleno del glifo preparado en lugar de confiar en el aspecto del SVG original sobre una página blanca.

¿Debo importar todas mis letras SVG a la vez? Termina primero un glifo representativo. Confirma su escala, línea base, contornos y espaciado, y después aplica un método coherente de preparación a las demás letras. La importación por lotes no puede decidir esos valores de diseño por ti.

Fuentes

  1. Tutorial de importación de contornos de FontForge — Importación en casillas de glifos, posicionamiento, escala uniforme y dimensiones coordinadas de origen.
  2. Menú File de FontForge — Tipos de importación, compatibilidad con SVG y operaciones con archivos de trabajo frente a archivos de fuente.
  3. Menú Element de FontForge — Corrección de la dirección de los contornos y sus límites ante cruces.
  4. Design With FontForge: importación de glifos — Coordenadas SVG y configuración del ascenso y descenso.
  5. Tutorial de métricas de FontForge — Espacios laterales, ancho de avance, espaciado en contexto y kerning.
  6. Tutorial de comprobación y generación de FontForge — Revisión de problemas y generación de un formato de fuente utilizable.

Si tu primer glifo solo existe como píxeles, convierte el dibujo en vectores editables, revisa el espacio interior y el contorno exterior y termina ese glifo en FontForge. Un contorno correctamente colocado, espaciado y probado es un punto de partida útil para el resto de la fuente.

Más del blog

Empieza con un SVG más limpio
y fácil de editar