Inkscape.org
Beginners' Questions SVG Fonts view differently?
  1. #1
    AmazingInk AmazingInk @AmazingInk

    Hi there, 

    I noticed on my svg images that contains fonts, when i open in internet explorer, the font look different that what i see in Inkscape. How should i save the svg file such that the text is maintained as what i see in Inkscape? ?

  2. #2
    brynn brynn @brynn

    When you open in IE, has the SVG file been uploaded to a website?  Or are you opening it locally on your computer?  Is it the same computer where you have that font installed?

    My best guess is that wherever you are viewing the SVG image in IE, that computer does not have the same font installed, so it can't display it.  It gives you the closest font it can find on that system.

    If you want the font to display the same way for everyone, everywhere, you should convert the text to paths, in the SVG file.  If there's some reason that you need the text to remain as text, you need to embed the font in the SVG file (or on the website where the page is loaded).  I can't tell you how to embed the font, since I don't know.  But let us know if that's what you need, because someone else will be able to tell you how (if you dont' know).

  3. #3
    AmazingInk AmazingInk @AmazingInk

    THe svg is opened locally on my computer, and now i understand how the font in SVG is dependent on whether the system has the font installed or not.

    Yes, i have tried contering text to paths and that work. But, it would be great to embed font in SVG so that other users manipulatin this image can change the text easily later without figuring out what fonts was used etc.

    So, yes, it would be good to have someone explain how to embed fonts in svg. :)

  4. #4
    Alpha_Zen Alpha_Zen @Alpha_Zen
    *

    There seem to be several ways to embed or  at last link fonts in a svg:

    http://nimbupani.com/about-fonts-in-svg.html (article more than ten years old, though)

    https://stackoverflow.com/questions/20905026/cross-browser-embedded-font-in-svg-image shows the implementation via CSS, but I can't tell about base64 encoding of fonts, which seems to be needed for this.

    In https://graphicdesign.stackexchange.com/questions/5162/how-do-i-embed-google-web-fonts-into-an-svg/124900#124900 is another discussion about this where a tool/site called Nano is brougt up. It seems to scan your SVG for used fonts and does the encoding and embedding for you. I didn't test it.

    They have a blog post on their site which explains different methods you could do per hand: https://vecta.io/blog/using-fonts-in-svg