Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to specify font-family in SVG

Tags:

fonts

svg

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

like image 837
Petr Avatar asked May 04 '15 07:05

Petr


People also ask

How do I add fonts to SVG?

Today, the best approach for embedding fonts directly in your SVG file is to use an OpenType-compatible web font, converted to a data URI, as the src URL in a CSS @font-face rule. Nonetheless, think carefully before using a data URI font on the web.

Can an SVG have font?

Note: SVG Fonts are currently supported only in Safari and Android Browser. The functionality was removed from Chrome 38 (and Opera 25) and Firefox postponed its implementation indefinitely to concentrate on WOFF. Other tools however like Batik and parts of Inkscape support SVG font embedding.


1 Answers

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
like image 161
ghazaleh javaheri Avatar answered Sep 25 '22 13:09

ghazaleh javaheri