How to specify font-family in SVG

14
votes

I have this piece of SVG picture:

<text
     xml:space="preserve"
     style="font-size:18px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:'Arial;Sans';-inkscape-font-specification:'Arial;Sans';font-stretch:normal;font-variant:normal"
     x="11.764346"
     y="192.01521"
     id="text3607"
     sodipodi:linespacing="125%"><tspan
       sodipodi:role="line"
       id="tspan3609"
       x="11.764346"
       y="192.01521">PCI-E</tspan></text>

which I edited on linux using inkscape. It used font "sans" which is not available on windows. I would like to specify a font-family that contains fonts available on all major operating systems, but whatever syntax I use it doesn't work. So far I tried:

  • font-family:'Arial' - works on windows
  • font-family:'Sans' - works on linux
  • font-family:'Sans,Arial' - broken
  • font-family:'Sans;Arial' - broken

What is correct syntax for this to work? I was rendering the picture in IE and Firefox, both seems to have same problems.

This is full source code of picture: https://tools.wmflabs.org/paste/view/raw/c47ec7b8

4
svgfonts

4 Answers

11
votes

in order to change font-family in svg you should first import font in defs in svg like this:

<defs>
    <style type="text/css">@import url('https://fonts.googleapis.com/css?family=Lato|Open+Sans|Oswald|Raleway|Roboto|Indie+Flower|Gamja+Flower');</style>
</defs>

then you can change font-family either using an inline style or by javascript

<text xmlns="http://www.w3.org/2000/svg" style="direction:rtl ;font-family:Gamja Flower" id="nametxt" class="text" transform="matrix(1 0 0 1 390 88.44)">text</text>

and for javascript:

 svgTextNode.style.fontFamily=FontFamily
7
votes

It seems that problem was I had it wrapped in quotes. Correct syntax (or at least it works to me):

font-family:Sans,Arial; (no quotes)

1
votes

In case if we need to declare global style we could use the following syntax:

<svg width="100" height="100"
    xmlns="http://www.w3.org/2000/svg">
    <style>
        text {
            font-family:Roboto-Regular,Roboto;
        }
    </style>
    ...
</svg>
0
votes

In my case I was converting an SVG as a base64.

Using font-family="Arial, sans-serif;" was not working, but when I removed ";" semi-colon from last portion, voila! it worked.