Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Erin Manahan
Erin Manahan
20,413 Points
Posted by Erin Manahan
Erin Manahan
20,413 Points

Why would the font change in an svg image when viewed on a Mac computer?

The website header I made uses a sans-serif font, it looks normal when viewed on a PC, but when I look at the site on my macbook it changes the lower font to a serifed font??? I don't know why its happening, or even how it's happening so I don't know how to make it look like what the original image is.

The scripty font I also used doesn't change it's just the lower font under the name.

The site is christinadeloma.com, I used an svg image for the header, is there something I did wrong?

1 Answer

Agustin Grube
Agustin Grube
39,278 Points
Agustin Grube
Agustin Grube
39,278 Points

Yes, custom fonts are an issue with SVGs. If the font is not included in your css, then it will not transfer to mobile. even then, mobile may change it.

Solution: Convert your fonts to Outlines before exporting.

Use Adobe Illustrator to create your SVGs. Before exporting / saving, use the Type -> Create Outlines to convert your fonts to paths. That will help in retaining your SVGs.