Why does the font change when viewing the published state of my SVG image imported into Webflow? It is supposed to be an image, not an actual font. Any suggestions?

If the font of an SVG image is changing when you view the published state in Webflow, it is likely due to the fact that the text within the SVG is being treated as live text rather than an image. This means that the browser's default font or a fallback font is being applied to the text.

To resolve this issue and ensure that the text within your SVG image appears consistently with the intended font, you can convert the text to outlines or paths within your design software before importing it into Webflow. When the text is converted to outlines, it becomes a vector shape rather than editable text, and the font information is no longer needed.

Here's how you can convert text to outlines in popular design tools:

1. Adobe Illustrator: Select the text, then go to Type > Create Outlines or use the keyboard shortcut Shift+Ctrl+O (Shift+Cmd+O on Mac).

2. Sketch: Select the text, then go to Layer > Convert to Outlines or use the keyboard shortcut Shift+Cmd+O.

3. Inkscape: Select the text, then go to Path > Object to Path or use the keyboard shortcut Shift+Ctrl+C.

After converting the text to outlines, export the SVG file from your design software and then import it into Webflow. This will ensure that the text is treated as an image rather than live text, and you won't experience any font changes in the published state.

Remember to save a copy of the original SVG file with editable text in case you need to make changes in the future.

By converting the text to outlines in your SVG image, you can maintain the intended font appearance and ensure a consistent viewing experience across different browsers and devices.