Quarto Website: Using local fonts (Google Fonts)

[Klesel]

Bug description

Setting: Quarto Website using a theme.

Objective: I would like to avoid downloading google fonts via the google api

Idea: Storing the fonts locally and include them via a custom scss file
_quarto.yml:

format:
 html:
 theme: 
 light: [flatly, light.scss]

light.scss:

/* lato-regular - latin-ext_latin */
@font-face {
 font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
 font-family: 'Lato';
 font-style: normal;
 font-weight: 400;
 src: url('fonts/lato-v23-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
 url('fonts/lato-v23-latin-ext_latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */

(...)

$font-family-sans-serif: 'Lato';
}

In my environment, the fonts are still downloaded from the google api in the fonts folder: /site_libs/bootstrap/fonts

This screenshot also shows that the api is still in use:

From a user perspetive, it would be most helpful to have a variable that ensures that no font is used via an api. Any other approach to ensure that only local fonts are used would likewise be appreciated.

As a side-note: This is particularily relevant in Germany, because there is a legal issue using google fonts that are included via the API. Therefore, this issue should be relevant for a larger group of users.

I raised this issue here.

My environment:

• WSL2 Ubuntu 20.04
• VS Code 1.75.1
• Quarto Version: 1.2.335

Checklist

• Please include a minimal, fully reproducible example in a single .qmd file? Please provide the whole file rather than the snippet you believe is causing the issue.
• Please format your issue so it is easier for us to read the bug report.
• Please document the RStudio IDE version you're running (if applicable), by providing the value displayed in the "About RStudio" main menu dialog?
• Please document the operating system you're running. If on Linux, please provide the specific distribution.

[cscheid]

Can you provide a link to a full repo that causes this? Thanks.

[Klesel]

https://github.com/Klesel/QuartoIssueGoogleFonts

Unfortunately, I was not able to reproduce the fact that the fonts are copies to /site_libs/bootstrap/fonts.

This screenshot is from this repo:

[cscheid]

Ok, there are a number of things going on here. Your repo has a few mistakes, but they're all easy to fix.

1. You need to be careful about the distinction between /*-- scss:defaults --*/ and /*-- scss:rules --*/. Your css @font-face declarations need to be in the rules layer, and your scss variables need to be in a defaults.
2. You need to declare the "fonts" directory as a resource so that it gets included in the website, by adding

    resources:
   - fonts/*

   to your _quarto.yml.
3. You need to explicitly disable the path to the web fonts (otherwise your browser will still attempt to download the fonts from google). You do this by overriding the $web-font-path directory (in this case, I just used a bad value, $web-font-path: "No"). This goes in the scss:defaults layer.

That does the trick for me locally. I'm going to go ahead and close this, but feel free to open if it doesn't solve your issue.

[cscheid]

I sent you a PR with the required fixes.

[Klesel]

@cscheid Your help is very much appreciated. That works perfectly.

I would love to see this in the documentation!

[cscheid]

@Klesel I made a note of this example, yes. We have our plates full but it'll be there when we get to it.