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

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?

Solution

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");
}