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

[chiragraman]

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 #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!

[chiragraman]

Update: My colleague Patrick may have a fix so that the font CSS files can directly be imported. The changes are in this PR on the minimal repo: chiragraman/quarto-fonts-test#1.

Briefly, the changes involved updating both the resources and the import paths. Crucially, the paths in the @font-face declarations do not need to be updates to point to the assets and can remain relative to the font directory of each font.

EDIT: The GET: /site_libs/bootstrap/No (404: Not Found) still persists, however.

[cscheid]

EDIT: The GET: /site_libs/bootstrap/No (404: Not Found) still persists, however.

You'll note that my original answer said:

You do this by overriding the $web-font-path directory (in this case, I just used a bad value, $web-font-path: "No")

I don't know if we have a good fix for this. Ideally something (either sass itself or our processing) would know that web-font-path: "disable" (or whatever we decide to call it) means "remove this from the SASS bundle", but I more-or-less intended that as a hack, and the error message is an inevitable consequence.

[chiragraman]

Aha, makes sense. I agree, making this more explicit might be a better way to handle things.

I feel it might be better to have a separate boolean variable for checking whether web fonts should be enabled rather than overloading the path variable to serve multiple functions.