Por qué cambia la fuente de tu SVG al exportarlo o importarlo

La fuente de tu SVG cambia porque el texto editable de SVG normalmente indica el nombre de una fuente; no incluye automáticamente las formas de sus letras dentro del archivo. Si el navegador, editor, software de corte o computadora del destinatario no puede usar esa fuente, elige una de reserva. Los distintos anchos de los caracteres cambian después los saltos de línea, la alineación y la posición de la ilustración cercana.

Hay dos estrategias fiables de entrega. Conserva el texto editable cuando el destino necesite palabras seleccionables, buscables o editables y puedas suministrar correctamente la fuente. Convierte el texto en contornos vectoriales cuando la apariencia deba permanecer fija y ya no haga falta editar las palabras. En ambos casos, conserva un archivo maestro editable separado.

Para una exportación automática a PNG, carga explícitamente los archivos de fuentes en resvg y compara las letras renderizadas con el original antes de entregarlo.

Para figuras de documentos, compara ilustraciones SVG y etiquetas compuestas en LaTeX. Separar la geometría del dibujo del texto de las etiquetas permite que el documento componga las palabras mientras conservas el maestro SVG.

Primero, determina si el SVG todavía contiene texto

La extensión por sí sola no responde a esta pregunta. SVG puede representar letras de al menos dos formas habituales:

<text font-family="Example Sans" font-weight="600">Sample</text>

Eso es texto editable. El SVG almacena caracteres e instrucciones de estilo. Un renderizador debe encontrar una fuente coincidente para convertir esos caracteres en glifos visibles.

El texto convertido en contornos se parece más a esto:

<path d="M ... Z" />

Aquí, cada letra se ha convertido en geometría vectorial. El destinatario no necesita la fuente, pero la palabra ya no es una cadena de texto editable normal.

Puedes comprobarlo sin entender todo el marcado:

1. haz una copia del SVG;
2. abre la copia en un editor de texto simple;
3. busca <text y <tspan;
4. busca el nombre visible de la fuente;
5. si no aparecen, inspecciona si las letras están construidas con elementos <path>.

En un editor vectorial, usa la herramienta de texto y haz clic en una letra. Un cursor de texto parpadeante indica texto editable. Los nodos alrededor de cada glifo indican contornos.

Tres estados de la tipografía

Causa 1: la fuente prevista no está instalada

El atributo font-family de SVG es una lista priorizada de nombres de familias. Como explica la referencia de font-family de SVG en MDN, el renderizador elige de esa lista. Si no encuentra la primera familia, pasa a la siguiente y finalmente a una genérica como sans-serif o serif.

Esto suele ocurrir cuando:

• el diseñador usó una fuente local que el destinatario no tiene;
• una fuente se activó mediante un servicio de suscripción solo en una máquina;
• el SVG pasó de un editor de escritorio a un teléfono, tableta, aplicación de corte o suite ofimática;
• el nombre interno de la familia difiere del nombre del archivo o del mostrado en la carpeta de descarga;
• solo hay instalado un estilo, mientras el SVG pide otro peso o una variante cursiva.

Instalar «algo parecido» no restaura la composición. Dos fuentes sans-serif pueden tener distintos anchos de letras, ascendentes, ajustes entre pares y métricas de línea base. La sustituta puede parecer cercana y aun así desplazar una palabra centrada de su posición prevista. Cuando la fuente correcta esté disponible, el ejemplo de alineación vertical de texto SVG ayuda a distinguir la posición de la línea base del cuadro de texto y del centrado visual.

Causa 2: el SVG espera una fuente web que no se cargó

Un SVG dentro de una página web puede recibir fuentes del CSS de la página. También puede incluir un bloque de estilos con una regla @font-face; SVG 2 requiere compatibilidad con fuentes descargables mediante el modelo CSS Fonts. Esta configuración falla cuando la URL de la fuente es incorrecta, el archivo no está publicado, el acceso está bloqueado, el formato pedido no es compatible o el SVG se abre solo en lugar de dentro de la página que proporcionaba sus estilos.

Usa las herramientas de desarrollo del navegador y recarga la página. En el panel Network, filtra los archivos de fuentes y busca solicitudes fallidas. En los estilos calculados del elemento <text>, confirma qué fuente se renderizó realmente en lugar de confiar en el nombre de familia declarado.

Un SVG que solo funciona integrado en un sitio web no es necesariamente un archivo de entrega autónomo. Prueba el SVG exportado directamente en una ventana privada y en otro dispositivo. Así se revelan dependencias ocultas de un servicio de fuentes con sesión iniciada, una fuente en caché o la hoja de estilos del sitio.

Incrustar un recurso de fuente puede hacer más portátil un SVG web, pero aumenta el tamaño, puede encontrar límites de compatibilidad según la aplicación y debe estar permitido por la licencia. Comprueba la licencia concreta en lugar de asumir que una licencia de escritorio autoriza redistribuir los datos de la fuente.

Causa 3: la familia o el peso no coinciden exactamente

La coincidencia de fuentes CSS usa más que la etiqueta visible de la familia. El SVG puede pedir:

font-family: "Example Sans";
font-style: normal;
font-weight: 600;

Si los archivos disponibles solo contienen pesos 400 y 700, el renderizador puede sintetizar un peso o elegir una variante cercana. Las fuentes variables añaden ejes y nombres de instancias que una aplicación importadora puede interpretar de otra manera. El software antiguo de diseño o corte puede ignorar algunas funciones OpenType, ligaduras o ajustes de variación.

Comprueba el documento original y el SVG uno al lado del otro:

• nombre exacto de la familia;
• estilo y peso numérico;
• espaciado entre letras;
• mayúsculas y minúsculas y caracteres reales;
• funciones OpenType como ligaduras;
• valores de los ejes de la fuente variable;
• comportamiento del texto sobre trazado o del texto vertical.

No corrijas una familia incorrecta escalando manualmente cada palabra. Eso oculta el síntoma y conserva los glifos equivocados.

Causa 4: la exportación conservó el texto, pero la aplicación importadora lo maneja de otra manera

La composición de texto SVG no es idéntica a la de un documento de autoedición. Un exportador puede usar elementos <tspan> anidados, coordenadas individuales, text-anchor o <textPath>. La aplicación importadora puede aplanar, reagrupar o reinterpretar esas funciones. Si reconstruyes una insignia, el tutorial de texto SVG editable sobre un trazado separa el emblema, la curva guía y el texto editable para que pruebes cada parte.

Para colocarlo en un documento, sigue el flujo de figuras SVG e ilustraciones en línea en Typst. Mantener los pies de figura como texto nativo del documento permite comprobar las letras de la ilustración por separado de la numeración y la tipografía de los párrafos.

La documentación actual de exportación SVG de Adobe señala que el texto sobre trazado puede no mantener la misma apariencia en todos los visores SVG. También distingue la salida con texto editable de Convert To Outlines, que convierte el texto en trazados vectoriales para conservar su apariencia.

Si la fuente correcta está presente, pero la posición cambia, inspecciona la estructura en lugar de cambiar de tipografía:

1. compara el renderizado del navegador con el editor original;
2. comprueba si cada carácter tiene su propia posición x;
3. inspecciona las transformaciones anidadas del grupo de texto;
4. observa si el importador eliminó text-anchor, el ajuste entre pares o la configuración de línea base;
5. prueba una copia con texto horizontal sencillo para aislar el comportamiento del texto sobre trazado.

Para un logotipo, insignia o encabezado de una línea cuya apariencia importe más que su edición, los contornos suelen ser la opción de entrega más segura.

Causa 5: convertiste el texto en contornos y esperabas que siguiera siendo editable

El texto convertido en contornos no puede sufrir sustitución de fuentes porque ya no hace referencia a ninguna. Aun así, puede sorprenderte al importarlo:

• las letras pueden llegar como trazados compuestos en lugar de una palabra editable;
• las contraformas interiores pueden rellenarse si se libera un trazado compuesto;
• muchos glifos pueden estar agrupados;
• una aplicación de destino limitada puede unir o simplificar trazados;
• el archivo puede ser mayor que la versión con texto editable.

Esos son cambios geométricos y de edición, no de fuente. Si las formas coinciden con el original, la exportación de contornos cumplió su función.

Conserva siempre dos archivos:

• Maestro editable: texto editable, información original de fuentes, capas con nombre y formato de la aplicación de origen.
• Copia de entrega: SVG, EPS o PDF con contornos para una entrega donde la apariencia sea crucial.

Nunca conviertas en contornos el único maestro. Un cambio ortográfico, una traducción o un nuevo eslogan se convierte en un lento redibujado manual cuando el texto ya son trazados.

¿Qué solución debes usar?

El destino decide el equilibrio. El texto editable conserva el significado y la edición. Los contornos conservan la apariencia. Un solo archivo no puede maximizar ambas cosas sin incluir dependencias adicionales o datos de origen.

Un proceso seguro para crear contornos

Para entregas donde la apariencia sea crucial:

1. guarda el documento original con texto editable;
2. duplícalo y añade -outlined o -delivery al nombre;
3. selecciona el texto y usa Create Outlines, Convert to Curves, Object to Path o el comando equivalente;
4. inspecciona los huecos de las letras y las formas superpuestas;
5. exporta SVG;
6. abre el SVG en un navegador y un segundo editor;
7. compáralo a tamaño normal y con gran ampliación con el original;
8. envía el archivo con contornos y archiva el maestro con texto editable y la información de la licencia.

No rasterices el texto solo para evitar una fuente ausente. Un PNG dentro de SVG impide la sustitución, pero pierde la geometría vectorial escalable. Convertir en contornos conserva vectores reales.

Si el único logotipo que queda es una imagen rasterizada

A veces no queda ni texto editable ni un maestro con contornos. Quizá solo tengas un PNG o JPG pequeño o una captura del logotipo. La guía para decidir cómo vectorizar un logotipo explica cuándo trazar esa imagen y cuándo redibujarla. Instalar fuentes no puede reparar una imagen rasterizada, e identificar una tipografía similar puede no reproducir modificaciones personalizadas de las letras.

Aquí PerfectVector puede ayudar bajo ciertas condiciones: la vectorización de logotipos puede reconstruir letras visibles rasterizadas como formas vectoriales. El resultado es una ilustración con contornos, no texto editable recuperado. No identifica la fuente original, no restaura ajustes entre pares ni vuelve a hacer las palabras editables con el teclado. Úsalo para recuperar la geometría visible del logotipo y conserva esa reconstrucción separada de cualquier maestro compuesto de nuevo.

Para una estrategia de entrega más amplia, la guía de formatos de archivo de logotipos explica qué formatos maestros y de entrega conservar.

Preguntas frecuentes

¿Por qué mi SVG usa una fuente distinta en otra computadora? Probablemente contiene texto editable que indica una fuente no disponible en la otra computadora. El renderizador sustituye la familia por otra de la lista de reserva, cambiando las formas, el ancho y el espaciado de los glifos y, a veces, la alineación.

¿Un SVG incrusta su fuente automáticamente? No. Un SVG puede indicar una fuente, recibirla del CSS de la página o incluir un recurso de fuente, pero el texto editable normal no empaqueta automáticamente el archivo de fuente de escritorio. Debes gestionar igualmente la disponibilidad, la compatibilidad del navegador y la licencia.

¿Debería convertir el texto SVG en contornos? Convierte una copia de entrega en contornos cuando la apariencia deba permanecer fija, especialmente para logotipos, letras decorativas, impresión y software de fabricación. Conserva texto editable en el maestro editable cuando importen las palabras, la accesibilidad, la búsqueda o la localización.

¿Por qué el texto convertido en contornos dejó de ser editable al importarlo? La conversión sustituye caracteres por trazados vectoriales. El destinatario puede editar nodos y formas, pero no colocar un cursor de texto ni cambiar la fuente. Es lo esperado, así que conserva y comparte un maestro con texto editable si habrá que cambiar las palabras en el futuro.

¿Puede PerfectVector recuperar la fuente original de un logotipo rasterizado? No. PerfectVector puede reconstruir las letras visibles como contornos vectoriales, pero no identifica la fuente original ni restaura caracteres editables, ajustes entre pares ni configuraciones de fuente. Úsalo cuando el objetivo sea recuperar la geometría visible del logotipo.

Fuentes

1. W3C — Texto SVG — Contenido de texto editable <text> y <tspan>, propiedades de fuentes, composición y compatibilidad con fuentes descargables.
2. W3C — Módulo CSS Fonts, nivel 3 — Coincidencia de familias, selección de variantes, familias ausentes y fuentes de reserva del sistema.
3. MDN — font-family de SVG — Listas priorizadas de familias y alternativas genéricas en SVG.
4. Adobe Illustrator — Crear contornos de texto — Conversión de texto en trazados y pérdida resultante de su edición como texto.
5. Adobe Illustrator — Guardar ilustraciones — Exportación de texto SVG, contornos y limitaciones de compatibilidad del texto sobre trazado.

Cuando la pérdida del maestro te deja solo un logotipo rasterizado, reconstruye sus letras visibles como contornos vectoriales con PerfectVector y verifica las formas en un segundo editor. Si todavía existe texto editable, resuelve la dependencia de la fuente o convierte una copia de entrega en contornos en lugar de volver a trazarlo.