Loading fonts from filesystem

[smolck]

So in my app I'd like to load a font/fonts from the user's system (e.g. from /Users/*/Library on macOS) and use them specifically for a canvas's font for drawing text, but also just generally for fonts of HTML elements. How might I go about doing this?

In Electron, I think this happens automatically; a quick ctx.font = '16px <font-face>' and it will search the system for the font face in question. I'm not quite sure how to achieve this with Tauri though?

I tried/am trying to use font-kit on the Rust side to load a font and get the corresponding binary data from it, then return it to JS via a command. From there using new FontFace(face, binaryData) and fontFace.load() etc. I thought I could get it to work, but I can't seem to (keep getting this SyntaxError: The string did not match the expected pattern. on trying to .load() the font, and I can't seem to find any MDN or otherwise docs on what that error means). Is this just a poor implementation on my part or is this unsupported or . . . ?

Ideally perhaps I could load the font from a css url(...) link, but I don't know how I could serve up a local file for the webview to access?

Thanks in advance!

[Blakeinstein]

I know its been a while since you got a response but you can use url() with whatever you are using to bundle your webpage.
something like vite would allow you to copy those assets to the build directory. Tauri will include those files too.
Something like this -> https://github.com/Blakeinstein/Bloop/blob/a0d4ec73a5b0938f2c4a01ff7e96a5bf39a8081e/src/web/index.html#L40

[mwritter]

Is there a way to use the users local fonts within dynamic css? I have a presentation application that allows the user to create slides and edit the 'theme' which creates a css file that is dynamically injected into the application, but Im not sure if its possible to use the system fonts in this way. Any insight would be greatly appreciated.

[mwritter]

Is there a way to use the users local fonts within dynamic css?

It looks like I can do something crazy looking like this but is this recommended?

getFontsDir().then((dir) => {
      readDir(dir).then((fonts) => {
        fonts.map(({ name, path }) => {
          const [fontName] = name?.split(".") || [];
          if (fontName) {
            const font = new FontFace(fontName, `url(${convertFileSrc(path)})`);
            font
              .load()
              .then((loadedFont) => {
                document.fonts.add(loadedFont);
              })
              .catch(function (error) {
                console.log("Failed to load font: " + error);
              });
          }
        });
      });
    });

It would be nice to load all the fonts via a config or build process. Im not quite sure if thats possible or if I can do that with vite some how 🤷‍♂️

[mwritter]

Actually seems like the webview has access to the system fonts already 🤔 - Just getting the font file name (excluding the file extension) from the fonts directory and setting that as the font-family in the css seems to work. One other thing I noticed, on macos there seems to be multiple places the 'fonts' can be. Library/Fonts, System/Library/Fonts and System/Library/Fonts/Supplemental - fontDir gives you user downloaded fonts but to get the system fonts as well I had to use System/Library/Fonts/Supplemental path.