Streaming live at 10am (PST)

Why svg image font changes


#1

Hi, I have created an svg images and imported into webflow. When viewing the published state the font changes? Why? It is an image not an actual font? Any ideas?


Here is my public share link: LINK
(how to access public share link)


#2

SVG isn't just a vector image format. It can contain numerous other stuff like bitmap images, and text as text (not vector). The text has a font property but the font isn't included. So if the system the SVG is viewed doesn't have the font installed, it'(s rendered with another default font.

Before exporting your vector file as a SVG image, you have to vectorize the font (text>outline in Illustrator). You can also use Export for Screens in Illustrator where there's an option to vectorize fonts upon export.


#3

Thanks for the super speedy reply. That advise is great to know, appreciate your time today


#4

I'm going to put that here because it's kind of advanced but can save lives save a lot of time to Illustrator users.

USE Export for Screens to export Artboards as SVG. No other method. And take the time to make the settings right. In the screenshot below, see how you can force the outline for fonts during export so you can preserve the editing capabilities in your design file. Also, for other reasons, apply my orange settings too. Too off topic to discuss here but trust me.


#5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.