Custom Font in svg

fonts, html, svg

Solution

You can change fonts in svgs just as you do in css.

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

Though I would suggest you define it more verbosely for better compatibility. That way you can provide a variety of fallbacks.

@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; 
}

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

That being said, if you REALLY want to assign the font IN the svg you would add the attribute font-family just like you have. Though I wouldn't include the file extension (.ttf) in the naming scheme.

Problem

I would like to use custom fonts in a svg embedded in a web page. With setattribute I can use Arial... fonts. I think those fonts are embedded in the browser and I can use it. But how can I do to use custom fonts? In Firefox, when I use in css for exemple @font-face .... ``` @font-face { font-family: "ITCGothicBold"; src: url('fonts/ITCGothicBold.ttf') format("truetype"); } ``` that font-family works in a Html web page. On the other hand, for exemple, in the 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 for exemple ITCGothicBold.ttf. Using setattribute I can put ITCGothicBold.ttf in the font_family attribute but nothing change: the HELLO text is not changing. Does anyone know how to work with custom font in svg embedded in a web page? Thanks NOTE: The full code I have 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> ```

Original source