Importing css files with @font-face declarations into a custom scss theme file for self-hosted fonts

Hello!

For convenience, the minimal reproducible example is here: https://github.com/chiragraman/quarto-fonts-test. Following the discussion in the Q&A post below, it seems relevant to create an issue to get to the bottom of how the relative paths are resolved. While a workable solution is to simply specify all @font-face definitions in a single scss file, it might be more elegant to be able to import the definitions from font-specific stylesheets in the case of multiple self-hosted fonts.

The core question is how to import these files within the rules layer of the custom scss file, since the relative paths resolve to be under _site/site_libs/bootstrap/ even if the resource path is _site/assets/fonts (the fonts aren't actually copied over either). More details in the discussion below.

Discussed in https://github.com/quarto-dev/quarto-cli/discussions/9516

^{Originally posted by chiragraman April 28, 2024}

Description

Hello!

This is most likely a basic question but I'd appreciate any help. I am trying to use custom fonts in a website project, and am running into errors arising from incorrect paths. I have set up a minimal example here with Fira Code as an example: https://github.com/chiragraman/quarto-fonts-test.

So far, I have followed the steps outlined in Issue #4387:

• add the fonts as resource files
• specified the @font-face declarations under /*-- scss:rules --*/
• turned off the web-font paths by setting $web-font-path: "No";

The errors are most likely arising because I am trying to import the font stylesheet in a fonts.scss file and specify this as a theme file in _quarto.yml. I'm doing this so I can keep all import statements for multiple font stylesheets in one place.

Previewing yields the following errors:

GET: /
  /site_libs/bootstrap/fonts/Fira-Code/fira_code.css (404: Not Found)
GET: /site_libs/bootstrap/No (404: Not Found)

I'd appreciate any help in understanding how the paths work. Thanks!