¿Por qué cambia la tipografía de mi logo SVG?

Por qué un SVG puede seguir dependiendo de una fuente

Un SVG puede contener texto editable además de formas vectoriales. Un objeto de texto puede indicar el nombre de una fuente sin incluirla en el archivo. Si el visor no tiene acceso a ella, puede utilizar otra. Eso modifica las letras y también puede cambiar el ancho del logotipo.

El navegador elige entre las familias tipográficas disponibles. Si una fuente no incluye un carácter, puede sustituirlo por el de otra. Por eso una tilde, un símbolo o una sola letra pueden verse mal aunque el resto parezca correcto. Además, CSS puede reemplazar el atributo font-family del SVG.

Al convertir el texto aprobado en contornos, sus formas visibles quedan guardadas como trazados vectoriales. El destinatario ya no necesita esa fuente para dibujar las letras. Es una opción útil para entregar un logotipo definitivo y conservar el original editable para futuros cambios.

Más información: MDN: cómo selecciona fuentes font-family · MDN: font-family y CSS en SVG · Adobe: convertir texto en trazados vectoriales

Localiza el primer punto en el que cambian las letras

Coloca la referencia aprobada junto al documento original y al archivo exportado. Compara la misma variante a un tamaño parecido. Sigue el recorrido desde el original hasta la exportación y el destino final para acotar el problema antes de cambiar ajustes.

Comprueba la fuente antes de crear contornos

Parte de un original editable y de una referencia aprobada. Si la aplicación avisa de que falta una fuente, resuélvelo primero. Si creas contornos después de una sustitución de fuente, conservarás las formas de la fuente equivocada; no recuperarás el diseño previsto.

Por ejemplo, si el logotipo aprobado utiliza un estilo semibold concreto pero el original ahora muestra regular, convertir ese texto en trazados conserva el grosor equivocado. La conversión ha funcionado, pero el diseño todavía necesita corregirse.

• ✓Confirma la familia, el estilo y los ajustes de fuente variable, si los hay, con el original aprobado.
• ✓Revisa la ortografía, las tildes, los signos, las letras personalizadas y las ligaduras.
• ✓Compara el espacio entre letras, la línea de base y la distancia entre el símbolo y el texto del logotipo.
• ✓Guarda el original editable por separado. Convierte el texto al exportar o trabaja en una copia de entrega claramente identificada.
• ✓Convierte todos los elementos de texto que formen parte del logotipo definitivo, incluido el eslogan aprobado si lo lleva.

Illustrator: crea contornos al exportar o en una copia de entrega

Elige el método adecuado para la entrega. La conversión al exportar permite mantener el texto editable en el original.

1. Abre el diseño correcto y ve a Archivo → Exportar → Exportar como; elige SVG.
2. En Opciones de SVG, selecciona Contornos en Fuente (Font → Outlines si tu interfaz está en inglés) y exporta.
3. Abre el SVG guardado en un navegador y compáralo con el logotipo aprobado.

Si necesitas una copia de trabajo con el texto convertido, duplica el documento, selecciona el texto del logotipo y elige Texto → Crear contornos (Type → Create Outlines). Conserva las formas y los huecos interiores de las letras; para exportar un logotipo normal no hace falta liberar los trazados compuestos.

¿Utilizas Guardar como o Guardar una copia? Ese cuadro de opciones de SVG denomina el ajuste Convertir en contorno. Los nombres de los controles varían según el método de exportación.

Más información: Adobe: opciones de exportación de SVG · Adobe: Create Outlines · Adobe: opciones para guardar como SVG

Figma: mantén activado Outline text para el SVG

Según la documentación de Figma, la conversión del texto a contornos está activada por defecto para SVG. Comprueba el ajuste de tu exportación.

1. Selecciona el marco o las capas del logotipo aprobado y elige SVG en Export.
2. Abre los ajustes específicos del formato y mantén activado Outline text.
3. Exporta el SVG y revisa el archivo descargado.

El texto se convierte en el archivo exportado y sigue siendo editable en el original. Si desactivas Outline text, el texto exportado sigue siendo editable y tendrás que comprobar la disponibilidad de la fuente en el destino.

Continúa con: Proceso completo para exportar un logotipo desde Figma

Más información: Figma: ajustes de SVG y Outline text

Affinity: utiliza una copia con el texto convertido en curvas

Affinity utiliza Convert to Curves para transformar los objetos seleccionados en trazados vectoriales editables. Conserva el texto en el original, convierte las letras aprobadas en una copia de entrega y revisa el SVG exportado. Los controles de exportación son distintos en la aplicación actual de Affinity y en Affinity Designer 2; sigue las indicaciones de tu versión.

Continúa con: Guía para exportar logotipos desde Affinity

Más información: Affinity: herramienta Mover y Convert to Curves

Revisa el SVG real y después su destino

Abre el archivo guardado o descargado, además de revisar el lienzo de diseño y la vista previa de exportación. Si el sitio web procesa las imágenes cargadas u optimiza los SVG, comprueba también el archivo que sirve al navegador.

Prueba el SVG tal como se insertará en el sitio, también si se utiliza como imagen o fondo CSS. Los navegadores pueden restringir los recursos externos de un SVG utilizado como imagen; por eso, verlo correctamente en una pestaña independiente no garantiza que se vea igual en la web.

• ✓Compara las letras características, las tildes, las ligaduras y los huecos interiores de letras como A, B y O.
• ✓Comprueba el ancho del texto, el espacio entre letras, la línea de base y la alineación con el símbolo.
• ✓Revisa el logotipo al tamaño pequeño al que se utilizará y amplíalo también para inspeccionar los detalles.
• ✓Comprueba cada variante de color aprobada sobre el fondo previsto.
• ✓Confirma que se hayan incluido los eslóganes y signos pequeños y que ninguna letra esté recortada.
• ✓Pide al destinatario que pruebe ese mismo archivo en la aplicación o el sitio web donde vaya a utilizarlo.

Más información: MDN: SVG utilizado como imagen · MDN: elementos de texto en SVG

Si el texto convertido sigue viéndose mal

Primero confirma que las letras afectadas sean realmente trazados en el archivo que se está utilizando. En ese caso, cambiar font-family no modifica su geometría. Compara la primera exportación con contornos con el original y revisa cada etapa posterior por separado.

• Las letras ya tienen otra forma justo después de convertirlas: compara el original con la referencia aprobada y comprueba si la fuente ya se había sustituido.
• Faltan huecos interiores o hay formas rotas: revisa los trazados compuestos, los rellenos, los recortes y cualquier limpieza posterior a la conversión.
• La geometría cambia tras optimizar el archivo: compáralo con la exportación sin optimizar y revisa la precisión de las coordenadas o la simplificación de trazados.
• El cambio aparece solo en el sitio web: inspecciona el archivo servido, los estilos de la página, incluidos rellenos y trazos, y el tamaño de visualización.
• Utilizas fuentes de color o efectos especiales: consulta la documentación de la fuente y de la aplicación. Adobe recoge problemas concretos de exportación y conversión para fuentes de color OpenType-SVG.

Más información: Adobe: precisión de la exportación SVG · Adobe: problemas con fuentes de color OpenType-SVG

Conserva la edición y cuida la accesibilidad

Las letras convertidas en contornos siguen siendo vectoriales, pero sus caracteres ya no son texto editable normal. Conserva el original para cambiar palabras, adaptar idiomas y seguir trabajando la tipografía. La conversión también puede aumentar los datos de trazados: compara el peso del archivo final en lugar de asumir que será menor.

Entrega al equipo de desarrollo un nombre accesible adecuado junto con el recurso. Si el logotipo es el único contenido de un enlace a la página de inicio, un ejemplo sería «Morrow Quay, inicio». Si ese mismo enlace ya contiene un texto visible equivalente, evita anunciarlo dos veces. La guía de imágenes funcionales del W3C explica esta diferencia.

Mantén los encabezados, los párrafos y las etiquetas de la interfaz como texto real siempre que sea posible. Convertir el logotipo en trazados no le proporciona por sí solo un nombre accesible ni hace accesible todo el sitio.

Revisa la licencia correspondiente antes de incluir archivos de fuentes en la entrega. Adobe Fonts, por ejemplo, distingue entre entregar el diseño terminado y que un cliente necesite su propia licencia para acceder a la fuente y editar directamente con ella. Otras fuentes tienen sus propias condiciones.

Más información: W3C WAI: accesibilidad de logotipos enlazados · Adobe Fonts: preguntas frecuentes sobre licencias

Prepara el paquete con el diseño comprobado

Cuando las letras exportadas coincidan con el diseño aprobado, utiliza ese SVG comprobado como punto de partida para los archivos del cliente. En logopack.app puedes previsualizar gratis el paquete de archivos del logo; para descargarlo en ZIP necesitas Pro. Consulta los planes actuales para ver las opciones de exportación.

Si logopack.app avisa de que el SVG contiene texto, vuelve a la aplicación de diseño y convierte las letras aprobadas en contornos o curvas. Corrige allí la tipografía: un generador de paquetes no puede recuperar la fuente prevista a partir de un logotipo que ya muestra una sustitución.

Continúa con: Elige los archivos para entregar al cliente · Compara los formatos de logotipos

Preguntas frecuentes sobre fuentes en SVG

Más información: MDN: utilizar fuentes en SVG