How to specify font-family in SVG

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)


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>

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

Tags:

Fonts

Svg