Web fonts in SVG images do not work

#1

Hi!

I want to embed SVG images in a wiki that contain custom web fonts. The image is displayed correctly, but the text in it does not use the correct font. If I open the image directly in the browser, it will appear in the appropriate font.

Original image above, imported to TiddlyWiki below:

Untitled
Untitled490Ă—534 106 KB

I created the images on https://excalidraw.com

The URL of the fonts contains external links. Could the error be similar to the constraints of an iframe in not being able to reference an external source? In this case, I can probably fix it by deleting the URL of the fonts and importing the fonts into the wiki itself, but I’d love to see a simpler solution.

#2

I went down that rabbit hole recently. Looked online, and found instructions how to embed online fonts in svg, but it’s not straightforward, and with an hour of trying the tips found, I did not have any luck (at least within tiddlers).

For example: Creating Embeddable Fonts as Data URIs — Using SVG with CSS3 and HTML5 — Supplementary Material.

I was able to get svgs to work with locally available fonts only…
[UPDATE: … until trying telumire’s trick in this thread!]

#3

I think this is because the url for the font in the style tag is parsed in wikitext by tiddlywiki and it break the path :

image
image847Ă—202 13 KB

If you disable the wikitext parsing (either in a tiddler with the type field set to image/svg+xml or with a typed blocks to enclose a custom parsing rule), it works as expected.

Try enclosing your SVG like this :

$$$text/vnd.tiddlywiki
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline html

//your svg here//

$$$

Here’s what I get :

image

EDIT: Actually, setting the type field to SVG doesnt work, I wonder why . One idea : with a SVG type field, tiddlywiki convert the image into a datauri. Maybe the font is too big to be included in the datauri ?

EDIT2: I think I’ve figured out why it doesn’t work ! According to this website, an image cannot trigger the download of an external ressource.

Data URI fonts have the benefit that—in most browsers—they can be used, even in SVG used as an image (<img> sources, or CSS background-image). Images do not trigger downloads of additional asset files, so separate font files will never load in these situations.

Meaning that the font must be included as a datauri, or included in another way.

EDIT3: Yep, that’s it. You can create a tiddler with the tag “$:/tags/Stylesheet” and declare your fonts inside it, and it will fix the font in the svg. Once you do that, you can remove this part from the svg :

 <defs>
    <style>
      @font-face {
        font-family: "Virgil";
        src: url("https://excalidraw.com/Virgil.woff2");
      }
      @font-face {
        font-family: "Cascadia";
        src: url("https://excalidraw.com/Cascadia.woff2");
      }
    </style>
  </defs>

Here’s the tiddler with the excalidraw fonts :

Excalidraw fonts.json (336 Bytes)

TL;DR :

The font doesnt work because tiddlywiki wikify the links to the fonts, which break the styling inside the SVG. To avoid that, disable the wikitext parsing using a typed block + a parsing rule, or create a stylesheet tiddler to move the style inside that tiddler. This way, tiddlywiki will keep the style as is. It will also save a bit of space in case you want to use these fonts again elsewhere in your wiki, you wont need to declare those again.

2 Likes
#4

Telumire, thanks!

I’ve updated my little tutorial with your tweaks:

https://google-fonts.tiddlyhost.com/#using%20webfont%20in%20svg

1 Like
#5

@telumire

Thanks for the investigation, your solution works!

Changing type of the SVG tiddler from image/svg+xml to text/vnd.tiddlywiki and creating the stylesheet tiddler for the fonts solves the problem.

2 Likes