How to specify font-family in SVG

Question

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.

Ringent

Answer 1

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)

Ringent

You can quote individual fonts. In fact you will need it for fonts with spaces in their names, eg "Museo Sans". However you shouldn't put quotes around the entire list. – Samurai

Answer 2

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

Consonant

For me the google API adds : "&display=swap" at the end, and it makes an error in the svg file. If i remove it the font doesn't work anyways – Cheryle

Answer 3

For security reason, embedded svg images have to be standalone images. You will need to make the svg 'standalone' by embedding all external assets (in our case is the font definition) into it. To embedded the font inside svg file, follow these steps:

1. Generate the embedded font url as base64

Download the font file you want to use under .ttf extension. We will need to have the embedded as data URI scheme.
Upload this font file to any online Data URI converter, I'm using dopiaza.org data URI generator for simplicity (or you can use any File to Base64 converter tool, as long as you follow the same data-uri generated pattern).

Upload the font file to the converter. Ensure Use base64 encoding is checked. Since we're embedding font, so choose Explicitly specify mime type and put the mime type is application/font-woff

Hit the Generate Data URI and let the tool do the job, it should present you the following data URI format:
data:<mime-type>;base64,<the_encoded_font_as_base64_content>

In our case using font as Mime-Type, it will be:

data:application/font-woff;base64,AAEAAAATAQAABAAwR0RFRv4pBjw....

2. Declare the embedded font inside our SVG file

Edit our SVG file that's using the font. Declare @font-face inside the tag. Put the generated data-uri URL above in the src: url("<generated_data_uri>")

<svg>
    <defs>
        <style>
            @font-face {
                font-family: Inter;
                src: url("data:application/font-woff;base64,AAEAAAATAQAABAAwR0RFRv4pBjw....")
            }
        </style>
    </defs>

    <!-- The rest of your SVG content goes here -->
</svg>

Thorner

Thanks for this tip and example. Very helpful. – Militia

Answer 4

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>

Consortium

Answer 5

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.

Cassaundracassava