How do I set the correct paths when using local fonts in a website theme?

[chiragraman]

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!

[mcanouil]

Related previous discussions:

• How to use local fonts with revealjs and embed-resources? #8036
• Local font not showing in Safari for Quarto website #1769

[chiragraman]

Thanks @mcanouil! I did find #8036 but the suggested solution of adding the files as a site resource was already covered by the suggestion in #4387 so I didn't tag it as well. I've been tinkering with the paths in the import in the minimal example but no dice.

I suspect I don't fully understand where the resources are copied to, it seems it's looking for the files under _site/site_libs/bootstrap/ while the resources seem to be placed under _site/assets/fonts which is actually empty.

[mcanouil]

See Klesel/QuartoIssueGoogleFonts#1 for the correction of #4387.

You did not follow Carlos structure. Adding /*-- scss:rules --*/ inside four Fira_Code.css is not a hack you can use.
/*-- scss:rules --*/ is for the SCCS file.

Your SCCS file should look like:

/*-- scss:defaults --*/

$font-family-sans-serif:     "Fira Code", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$font-family-monospace:      "Fira Code", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
$web-font-path:              "No";

/*-- scss:rules --*/
@font-face{
  font-family: 'Fira Code';
  src: url('./assets/fonts/Fira-Code/eot/FiraCode-Light.eot');
  src: url('./assets/fonts/Fira-Code/eot/FiraCode-Light.eot') format('embedded-opentype'),
       url('./assets/fonts/Fira-Code/woff2/FiraCode-Light.woff2') format('woff2'),
       url('./assets/fonts/Fira-Code/woff/FiraCode-Light.woff') format('woff'),
       url('./assets/fonts/Fira-Code/ttf/FiraCode-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face{
  font-family: 'Fira Code';
  src: url('./assets/fonts/Fira-Code/eot/FiraCode-Regular.eot');
  src: url('./assets/fonts/Fira-Code/eot/FiraCode-Regular.eot') format('embedded-opentype'),
       url('./assets/fonts/Fira-Code/woff2/FiraCode-Regular.woff2') format('woff2'),
       url('./assets/fonts/Fira-Code/woff/FiraCode-Regular.woff') format('woff'),
       url('./assets/fonts/Fira-Code/ttf/FiraCode-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face{
  font-family: 'Fira Code';
  src: url('./assets/fonts/Fira-Code/eot/FiraCode-Medium.eot');
  src: url('./assets/fonts/Fira-Code/eot/FiraCode-Medium.eot') format('embedded-opentype'),
       url('./assets/fonts/Fira-Code/woff2/FiraCode-Medium.woff2') format('woff2'),
       url('./assets/fonts/Fira-Code/woff/FiraCode-Medium.woff') format('woff'),
       url('./assets/fonts/Fira-Code/ttf/FiraCode-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face{
  font-family: 'Fira Code';
  src: url('./assets/fonts/Fira-Code/eot/FiraCode-Bold.eot');
  src: url('./assets/fonts/Fira-Code/eot/FiraCode-Bold.eot') format('embedded-opentype'),
       url('./assets/fonts/Fira-Code/woff2/FiraCode-Bold.woff2') format('woff2'),
       url('./assets/fonts/Fira-Code/woff/FiraCode-Bold.woff') format('woff'),
       url('./assets/fonts/Fira-Code/ttf/FiraCode-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

[chiragraman]

Aha, I'd just caught that, but hadn't figured out the right specification for the paths in the src. Thanks @mcanouil!

Just to confirm then, there is no way to keep the @font-face declarations in a font-specific css file and then import them all, right? Was hoping to avoid a growing rules layer as I add more fonts.

[mcanouil]

I don't think so, or maybe by setting the import in the right section.

[chiragraman]

For completeness, I tried the following in scss file:

/*-- scss:rules --*/

@import url(./fonts/Fira-Code/fira_code.css)

which results in the following error:

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

The main issue seems be that the imports are relative to /site_libs/bootstrap/ which puzzles me. I'm going ahead and accepting your answer above since it is a workable solution. Nevertheless, it would be nice if we could still get a clearer understanding of how the imports work. Should I be creating an issue from this discussion if it's meant to be a feature request?

[cscheid]

I'm fairly sure we have an open issue about bugs in resolving relative paths that come from inside CSS and SCSS files. If you can offer a small, reproducible project that triggers the bug, that is nevertheless useful for us, so please open a new issue in that case.