[Resolved] SVG logo displaying a different font on mobile browser

[Andrew]

Hi All,

I uploaded my SVG logo into WordPress by using the safe SVG plugin. It is displaying perfectly on my laptop screen in multiple browsers and in the WordPress customizer in all responsive display modes. The problem comes when I use my iphone to view the website. The logo displays in a completely different font and is spaced weird in Chrome, Safari, and Firefox mobile browsers. Please Help!! I’ve been trying to figure this out all day. The website can be viewed at woohttps://woodandsaw.com/

Thanks in advance for any advice you can give me.

[Andrew]

I had to recreate the logo in adobe illustrator by using the “Create Outlines” feature under the “Type” menu.

https://teamtreehouse.com/community/why-would-the-font-change-in-an-svg-image-when-viewed-on-a-mac-computer

[Leo]

Hi there,

Have you fixed this? The logo on mobile logo looks good on my iPhone 6s?

Let me know if I’m missing something 🙂

[Andrew]

Hi Leo,

Thanks for checking it out. I responded to my first post after I posted it. But yes I did fix it. The problem was with how I created the SVG file in Adobe Illustrator. Even though I did it exactly the way an Adobe video tutorial said to do it. The missing piece was that I had to run the .ai file under the “type” menu and run the “create outlines” menu item before converting the file to SVG. Hope this will help someone else that runs into the same issue.

[Leo]

Ahh ok.

Glad you figured out!

[Kevin]

I ran into this also. I use Inkscape and instead of “Create Outlines”, I did “Object to Path”.

[Author]

Posts