treehouse : what would you like to learn today?
Web Design Web Development iOS Development

If font not supported use different position in svg

  • I have an .svg, which I created with Adobe Illustrator, with the font being Franklin Gothic-Medium. Mobile Apple devices (what I tried) don't support this font so switch to Time New Roman. I edited the svg file to include other web-safe fonts such as Geneva, and sans-serif, but the spacing is messed up when Franklin Gothic-Medium isn't being used (the e overlaps the B). Check it out below: remove the Franklin Gothic-Medium font and see what happens.

    I was wondering if there is a way to change the positioning or letter spacing only if Franklin Gothic-Medium isn't being used. CSS is also an option; I'm willing to use anything code-wise to get this to work. Installing the font is my last resort as I don't want to slow down my website. Thanks a lot!

    http://codepen.io/jberk/pen/ikLHF