I attempted to incorporate custom fonts into my SVG file, but unfortunately, my efforts were unsuccessful. While I have successfully implemented custom fonts on regular HTML/CSS webpages before, I encountered difficulties when trying to do the same with SVG. Despite following the recommendations provided on various websites, I could not get it to 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>
Upon opening the SVG file in Chrome and Firefox, I noticed that they were using default Linux system fonts instead of my custom font. When I changed the font-family style of the text to other Linux fonts, it displayed correctly. However, my custom font was not being applied.
The custom font I am using is a Thai font obtained from fontsquirrel.com. I am striving to ensure consistent font appearance for all users viewing my SVG file.
I have verified that the path to the custom fonts is correct and accessible in the browser. Any suggestions on how to rectify this issue would be greatly appreciated.