How font-family with unicode

Question

I have the following problem with svg files I created. I need images of the individual letters for many fonts, including exotic ones. To do this, I wrote the following svg files with correspondingly changing Unicode information in decimal notation:

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 200px 200px" fill="none">
    <text text-anchor="middle" alignment-baseline="central" x="100" y="160" style="font-family:'Times Roman';font-size:160px;fill:rgb(0,0,0)">
        &#67088;
    </text>
</svg>

These files also work without any problems with the letters contained in the “Times Roman” font. But when I use a font that is also installed on my computer, it doesn't work. In the example above, I replace “Times Roman” with “Noto Sans Linear A” or another font with Linear A support. What am I doing wrong?

Answer 1

I can imagine that you are displaying this SVG in a browser from the filesystem (not a web server). First of all you should run the file from a web server, locally or somewhere else. Second, to make sure that anyone can see the text with the font that you choose you need to reference that font as a Web font.

Here is an example of a font from everythingfonts.com. And you can see the particular font does not include the character 𐘐, so you need to find a font somewhere that can be used as a web font and that also includes the characters that you are interested in.

<link rel="stylesheet" media="screen" href="https://everythingfonts.com/font/face/S38OFGypEeKuYlDlSVDSjg" type="text/css"/>

<svg xmlns="http://www.w3.org/2000/svg" height="150" viewBox="0 0 600 200" fill="none">
  <text text-anchor="middle" dominant-baseline="middle" x="300" y="100" style="font-family:'BeonRegular';font-size:150px;fill:rgb(0,0,0)">
    &#67088;test
  </text>
</svg>