How to override the default font using locally stored fonts in themes?

Question

I am using Quarto to build a website and try to override the default fonts within a theme. (My overall goal is to use local google fonts instead of using the google api).

my _quarto.yml looks like that:

project:
  type: website

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

the light.scss does look like that. All fonts are in fonts/

/*-- scss:defaults --*/

/* lato-regular - latin-ext_latin */
@font-face {
  font-display: swap; 
  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+ */
}

I am using the developer mode in chromium to investigate, if the local files are used. Unfortunately, my custom.scss i.e.,(light.scss) is not able to override the default configuation.

How is it possible to override the use of the api and use local fonts instead?

by `custom.scss`, do you mean `light.scss`? – shafee Feb 15 '23 at 19:57 — shafee, Feb 15 '23 at 19:57
yes. I edited my comment accordingly. – Michael K Feb 15 '23 at 20:05 — Michael K, Feb 15 '23 at 20:05

shafee · Accepted Answer · 2023-02-17T06:32:39.887

updated answer based on this discussion

At first, explicitly disable the path to webfonts that flatly theme is using by overriding the Sass variable $web-font-path (by giving a bad value to it like $web-font-path: "No").
Secondly, though You have defined a @font-face, you have not used that. You need to tell quarto to use that font and you can do it by defining Sass variables $font-family-sans-serif (use it to define the sans-serif font family for the page) or $font-family-monospace (use it to define monospace font family for the page) in the light.scss file.
Finally, an important thing to note that, Sass variable declaration need to go under the /*-- scss:defaults --*/ layer and @font-face declaration need to go under the /*-- scss:rules --*/ layer.

Therefore the light.scss file should look like,

/*-- scss:defaults --*/

$font-family-sans-serif: "Lato";
$font-family-monospace: "Lato";
$bs-body-font-family: "Lato";
$web-font-path: "No";

/*-- scss:rules --*/

/* lato-regular - latin-ext_latin */
@font-face {
  font-display: swap;
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/lato-v23-latin-ext_latin-regular.woff2") format("woff2"),
      url("./fonts/lato-v23-latin-ext_latin-regular.woff") format("woff");
}

/* lato-italic - latin-ext_latin */
@font-face {
  font-display: swap;
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  src: url("./fonts/lato-v23-latin-ext_latin-italic.woff2") format("woff2"),
      url("./fonts/lato-v23-latin-ext_latin-italic.woff") format("woff");
}

/* lato-700 - latin-ext_latin */
@font-face {
  font-display: swap;
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/lato-v23-latin-ext_latin-700.woff2") format("woff2"),
      url("./fonts/lato-v23-latin-ext_latin-700.woff") format("woff");
}

/* lato-700italic - latin-ext_latin */
@font-face {
  font-display: swap;
  font-family: "Lato";
  font-style: italic;
  font-weight: 700;
  src: url("./fonts/lato-v23-latin-ext_latin-700italic.woff2") format("woff2"),
      url("./fonts/lato-v23-latin-ext_latin-700italic.woff") format("woff");
}

Cedric Rossi · Answer 2 · 2023-02-16T19:55:28.377

1

The scss code for the Flatly theme starts with:

$web-font-path: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" !default;
@if $web-font-path {
  @import url($web-font-path);
}

Iterating on @shafee's answer, by putting the following in light.scss

/*-- scss:defaults --*/

@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Lato-Regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('fonts/Lato-Regular.woff2') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


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

$web-font-path: "fonts/Lato-Regular.woff2";

everything gets loaded locally.

edited Feb 16 '23 at 19:55

answered Feb 16 '23 at 12:36

Cedric Rossi

21
5

Thanks for the confirmation. It seems like I am still overseeing something. As you can see in the screenshot, the issue still remains with the normal style as well. I also added `$font-size-root: 'Lato';`whitout success. – Michael K Feb 16 '23 at 13:03
I think it's theme specific; I'm changing my answer to make it work for flatly – Cedric Rossi Feb 16 '23 at 19:51

score 0 · Answer 3 · answered Feb 16 '23 at 19:39

0

You can use embed-resource: TRUE in the header of index.qmd:

This will include everything, javascript, css etc. in a stand-alone version, and there will be no CSS linking to Google fonts.

---
title: "GoogleFontIssue"
embed-resources: true
---

answered Feb 16 '23 at 19:39

TimTeaFan

17,549
4
18
39

How to override the default font using locally stored fonts in themes?

3 Answers3

updated answer based on this discussion

Linked