SVG export / font name / provide a ttf

[Sciss]

Hi there. When I export an SVG image from excalidraw to keep using it on the desktop via Inkscape, I need to install the font. Would it be possible to provide a direct ttf download along the woff2 for desktop use? If I convert with google/woff2, the file is Virgil.ttf, but the system (Gnome) installs it with the logical name Virgil 3 YOFF, and so it does not match the font families as they appears in the SVG, which are given as "Virgil, Segoe UI Emoji". So I think either the SVG should call the font Virgil 3 YOFF, or the generated TTF should have the logical name Virgil. For now, I find-and-replace the names in the SVG with a text editor...

[rmgk]

Hi, as I ran into the same problem, I found a workaround (that does not quite address your use case with inkscape)

Convert the font as you did (well, I used the woff2_decompress debian package but that should not make a difference) and put it somewhere the system finds (I use ~/.local/share/fonts/)
Then add the following to a config file that fontconfig finds (I use ~/.config/fontconfig/conf.d/virgil.conf)
Inkscape seems to still not pick it up, but conversion to PDF via cairosvg does work, and inkscape can then import that pdf corectly …

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>

  <match target="pattern">
    <test name="family" qual="any" >
      <string>Virgil</string>
    </test>
    <edit name="family" mode="assign" binding="same">
      <string>Virgil 3 YOFF</string>
    </edit>
  </match>

</fontconfig>

[RaphaelWimmer]

Another workaround (on Debian / Linux): open the ttf file generated by woff2_decompress with fontforge and select Element -> Font Info.. from the menu. Replace font name with "Virgil" and generate a new ttf file via File -> Generate Fonts....

[ubitux]

Hi, as I ran into the same problem, I found a workaround (that does not quite address your use case with inkscape)

Convert the font as you did (well, I used the woff2_decompress debian package but that should not make a difference) and put it somewhere the system finds (I use ~/.local/share/fonts/)

I confirm that it needs to be in something else than .woff2 for Inkscape to accept the font: even though fc-match 'Virgil 3 YOFF' does return Virgil.woff2: "Virgil 3 YOFF" "Regular" we can't use it in Inkscape.

Then add the following to a config file that fontconfig finds (I use ~/.config/fontconfig/conf.d/virgil.conf)

Note here: it seems that I needed the config file to be prefixed by a number to be honored:

% cd ~/.config/fontconfig/conf.d
% ls
virgil.conf
% sudo -E strace -u $USER -f -e openat fc-match Virgil|& grep virgil.conf
% mv virgil.conf 01-virgil.conf
% sudo -E strace -u $USER -f -e openat fc-match Virgil|& grep virgil.conf
openat(AT_FDCWD, "/home/ux/.config/fontconfig/conf.d/01-virgil.conf", O_RDONLY|O_CLOEXEC) = 5

Also, it's interesting that fc-match Virgil doesn't indeed match Virgil 3 YOFF by default and we need that configuration.

Inkscape seems to still not pick it up, but conversion to PDF via cairosvg does work, and inkscape can then import that pdf corectly …

The excalidraw SVG contains this: font-family="Virgil, Segoe UI Emoji", and the emoji fallback is the problematic one. Here is how it behaves with fontconfig on my machine:

% fc-match "Virgil"
Virgil.ttf: "Virgil 3 YOFF" "Regular"
% fc-match "Virgil, Segoe UI Emoji"
NotoColorEmoji.ttf: "Noto Color Emoji" "Regular"

If I do uninstall noto emoji though:

% fc-match "Virgil, Segoe UI Emoji"
Virgil.ttf: "Virgil 3 YOFF" "Regular"

And finally here it works for me in Inkscape. Alternatively, removing the Segoe references in the Excalidraw SVG also works. Note that whether you specify Virgil before or after Segoe UI Emoji doesn't help with the priority selection. Also, even specifying explicitly Virgil 3 YOFF doesn't help (so this is not an issue with the fontconfig file you proposed).

To summarize, here is a summary of the multiple issues we have:

• Inkscape: missing external and embedded font support: https://gitlab.com/inkscape/inbox/-/issues/301
• Inkscape: could add support for woff2 format
• Inkscape: I think Inkscape should not pass-through the font-family as-is to fontconfig and instead query one by one depending on the characters requested (or maybe fontconfig should honor the order but since it doesn't know the characters in fc-match I think it makes sense to use another heuristic, but I don't know)
• Fontconfig: honestly, Virgil should match Virgil 3 YOFF, I don't know why it needs the exact string here
• Excalidraw: should probably embed the font so we don't have to download it
• Excalidraw: the Virgil 3 YOFF should be named Virgil to avoid that kind of nasty matching issues

[suuuehgi]

Same here. There are multiple problems here.

0. Excalidraw exports SVGs using a font Virgil but the provided font calls itself Virgil 3 YOFF.
1. I Installed the provided Virgil font Virgil 3 YOFF but fc-match refused to find it. -> Inkscape fails to render it properly.
2. For emojis, Excalidraw uses Segoe UI Emoji what is a proprietary Microsoft font not present on non-MS systems (an open-source alternative is Noto Color Emoji).
   2.2) Apparently, Inkscape -- at least on Linux -- is not capable of rendering text-emojis at all.

So, it all depends on what one wants to do with the file.

• If you want to use it in Inkscape with editable text, you can do a simple text replacement (Virgil -> Virgil 3 YOFF) within the SVG file. Then it renders correctly within Inkscape for me. With emojis you appear to be out of luck here.
• If you want to just get a vector graphic, Firefox renders the SVG fine (in fact, browsers are the only programs I tried that do render this correctly). From your Browser, you can print it as PDF. As this is most likely not the correct size (a4 or letter), you can cut it with your program of choice (e.g. briss, inkscape, ... [for Inkscape you have to choose "Poppler/Cairo import" to convert the text to paths]). It's a hassle but at least now I have my EPS file.

[aarav2you]

For people who want PDFs:
After you get your SVG with the font working:

1. Open it in your browser (I used a chromium based one)
2. Press Ctrl+P
3. If not fitting properly:
   a. Go to More Settings
   b. Changer paper size to A0
   c. Remove margins
   d. Decrease scale value till it fits
4. Save as PDF
5. Later you can resize the PDF using other tools

Proof this works: