How to get @font-face rules to work?

[edemond]

Hi! I'm new to Mint and loving it, but I cannot for the life of me figure out how to get @font-face rules to work. What I assume that I have to do is:

• Add a web font file to my project directory (probably under /assets)
• Add some kind of directive to get the font file included in the production build + development server
• Reference the path in a @font-face rule in a style block.

The docs feel a little unclear on this. Here's the example from the Styling Elements page:

@font-face {
      font-family: "Open Sans";
      src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
           url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
    }

This leaves me with a couple questions:

1. Where in the project directory should I be placing the font file for a path like /fonts/OpenSans... to be correctly referenced?

2. How do I include the font in the production build? Do I need an @asset rule? I've tried the obvious thing of putting the @asset directive in the @font-face src property, but the compiler won't allow interpolations in a @font-face rule.

I've looked at what mint-ui is doing to get custom fonts and it's working around the problem using JS interpolation, which does not seem ideal: https://github.com/mint-lang/mint-ui/blob/97e59a93d7d6d5cc1a64b4d43832b6b955212d1d/source/Theme.Root.mint

Everything I've tried that compiles seems to return a 200 with an empty response, and the font file does not appear in the /dist directory after doing a build:

$ curl -i http://localhost:3000/assets/Inter-Regular.woff2
HTTP/1.1 200 OK
Connection: keep-alive
X-Powered-By: Kemal
Content-Type: text/html
Content-Length: 0

Is there any way to do this without dropping down to the JS level? If so, could the docs be clarified on how to do it? Thank you!

[edemond]

Solved it; the font file has to be in /public, which I did not know about.

For example, with /public/FontFile.woff2, then the @font-face rule should point to url("FontFile.woff2"), and no @asset directive is needed.

I might open a PR for the docs on this—it'd be useful for people who failed to read about the public dir like me :)