Cannot use @font-face to use font on a SVG file

Question

I am trying to use custom fonts on my SVG file but failed. I tried this on normal HTML/CSS webpages and it worked fine. But when it comes to SVG, I tried the ways suggested on websites but it didn't work.

<?xml version="1.0"?>
<!-- Generated by SVGo -->
<svg width="500" height="500"
 xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<script type="text/css">
<![CDATA[
    @font-face {font-family: "waffle_regularregular";src:url('/font/waffleregular-webfont.eot');src: url('/font/waffleregular-webfont.eot?#iefix') format('embedded-opentype'),url('/font/waffleregular-webfont.woff2') format('woff2'),url('/font/waffleregular-webfont.woff') format('woff'),url('/font/waffleregular-webfont.ttf') format('truetype'),url('/font/waffleregular-webfont.svg#waffle_regularregular') format('svg');font-weight: normal;font-style: normal;}
]]>
</script>
<script type="text/css">
<![CDATA[
    text {font-family: "waffle_regularregular"}
]]>
</script>
</defs>
<text x="250" y="250" style="text-anchor:middle;font-size:30px;fill:white">ทดสอบ test ព័ត៌មានតាមថ្ងៃ 日本語 中文</text>

Everytime I open it on Chrome and Firefox, they picked Linux system fonts to display. For testing, I changed the text's font-family style to other Linux fonts and it worked fine. It just doesn't use my custom font.

My custom font is a Thai font and was generated by fontsquirrel.com. I am trying to do this to make sure all clients will see the same font on my SVG.

I checked the path to the custom fonts on browser and they were all available. Please kindly suggest.

Answer 1

You need to use style instead of script to load and specify the font:

<?xml version="1.0"?>
<!-- Generated by SVGo -->
<svg width="500" height="500"
 xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
    @font-face {font-family: "waffle_regularregular";src:url('/font/waffleregular-webfont.eot');src: url('/font/waffleregular-webfont.eot?#iefix') format('embedded-opentype'),url('/font/waffleregular-webfont.woff2') format('woff2'),url('/font/waffleregular-webfont.woff') format('woff'),url('/font/waffleregular-webfont.ttf') format('truetype'),url('/font/waffleregular-webfont.svg#waffle_regularregular') format('svg');font-weight: normal;font-style: normal;}
]]>
</style>
<style type="text/css">
<![CDATA[
    text {font-family: "waffle_regularregular"}
]]>
</style>
</defs>
<text x="250" y="250" style="text-anchor:middle;font-size:30px;fill:white">ทดสอบ test ព័ត៌មានតាមថ្ងៃ 日本語 中文</text>
</svg>

That should work fine (as long as the path to the font is correct).