Custom font in svg

Question

I would like to use custom fonts in svg embedded in a webpage. With setattribute, I can use Arial ... fonts. I think these fonts are embedded in the browser and I can use it. But how can I use custom fonts? In Firefox, when I use css for example @ font-face ....

@font-face { font-family: "ITCGothicBold"; src: url('fonts/ITCGothicBold.ttf') format("truetype"); } 

that the font family works on an Html web page.

On the other hand, for example, in svg text:

 <text xml:space="preserve" text-anchor="middle" font-family="ITCGothicBold.ttf" font-size="24" id="svg_1" y="72.83333" x="74.75" stroke-width="0" stroke="#000000" fill="#000000">HELLO</text> 

I would like to use ITCGothicBold.ttf as an example. Using setattribute, I can put ITCGothicBold.ttf in the font_family attribute, but nothing will change: the HELLO text does not change. Does anyone know how to work with custom svg font embedded in a web page? Thanks

NOTE. The full code I used is:

 <svg width="612" height="394" xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css">@font-face { font-family: "ITCGothicBold.ttf"; src: url('fonts/ITCGothicBold.ttf') format("truetype"); }</style> </defs> <g> <title>Calque 1</title> <text fill="#000000" stroke="#000000" stroke-width="0" x="75.75" y="72.83333" id="svg_1" font-size="24" font-family="ITCGothicBold.ttf" text-anchor="middle" xml:space="preserve">HELLO</text> </g> </svg> 

Answer 1

You can change fonts in svgs in the same way as in css.

 <style> @font-face { font-family: font; src: url(font.woff); } svg{ font-family: font, fallBackFonts, sans-serif; } </style 

Although I would advise you to define this in more detail for better compatibility. This way you can provide various fallback options.

 @font-face { font-family: 'font'; src: url('font.eot'); src: url('location/of/font.eot?#iefix') format('eot'), url('location/of/font.woff') format('woff'), url('location/of/font.ttf') format('truetype'), url('location/of/font.svg#webfont') format('svg'); font-weight: 400; font-style: normal; } 

The services that provide font conversion (for eot, woff, truetype, and svg files) are ...
https://github.com/briangonzalez/fontprep
http://www.fontsquirrel.com/tools/webfont-generator

However, if you really want to assign a font to svg, you would add the font-family attribute just like you. Although I would not include the file extension (.ttf) in the naming scheme.

Answer 2

This is how I referenced the SVG font from another SVG file:

 <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000"> <defs> <font-face> <font-face-src> <font-face-uri href="file:///.../DejaVuSans.svg"/> </font-face-src> </font-face> </defs> <text x="0" y="400" font-family="DejaVu Sans" font-size="200"> Abc </text> </svg>