Using a custom web font within an SVG file

Elements Typography
2

Using a font within an SVG requires a defs section:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="30" viewBox="0 0 1000 300">
    <defs>
        <style type="text/css">
            @font-face {
                font-family: 'sfns_displayregular';
                src: url('system_san_francisco_display_regular-webfont.eot');
                src: url('system_san_francisco_display_regular-webfont.eot?#iefix') format('embedded-opentype'), url('system_san_francisco_display_regular-webfont.woff') format('woff'), url('system_san_francisco_display_regular-webfont.ttf') format('truetype'), url('system_san_francisco_display_regular-webfont.svg#sfns_displayregular') format('svg');
                font-weight: normal;
                font-style: normal; }
        </style>
    </defs>

    <text x="250" y="150" font-family="sfns_displayregular" font-size="120">
        SF Font 
    </text>
    
    <text x="250" y="250" font-family="courier" font-size="120">
        Courier
    </text>
    
    <!-- Show outline of canvas with a 'rect' element -->
    <rect x="1" y="1" width="998" height="298" fill="none" stroke-width="2"/>
</svg>

So as long as your have your font files in the same folder as your SVG, you can reference them in your SVG without any folder paths or using ${resourcesFolderName}

  • Make sure you don’t have ‘Automatically optimize when exporting’ checked when your SVG is selected.
  • Drag and drop your font files and SVG into your resource library and you should be able to use a similar format as the above code.

font.zip (118.1 KB)

2 Likes