Quarto: Howto use a custom (Web)font?

Question

I'm trying to get a Quarto home page of the ground and one requirement is a custom font (free webfont; Tex-Gyre-Adventor).

Following the documentation, I have played around with the html format specific mainfont tag in various iterations (see header example below), but cannot make this work - including if the font is additionally defined as a @font-face in style.css (and many other attempts).

Can anyone point me in the right direction how to use mainfont with a non-standard font?

Thanks for any pointers!

---
title: "Page"
title-block-banner: false
format:
  html:
    theme: vapor
    mainfont: `https://fontlibrary.org/en/font/tex-gyre-adventor`
    code-fold: true
    toc: false
    number-sections: false
link-citations: yes
---

shafee · Answer

To use a custom webfont as the mainfont, just add font stylesheet file in document header using header-includes and set the font name in mainfont yaml key.

---
title: "Page"
title-block-banner: false
format:
  html:
    theme: vapor
    code-fold: true
    toc: false
    number-sections: false
    header-includes: |
      
link-citations: yes
mainfont: TeXGyreAdventorRegular
---

## Quarto

Quarto enables you to weave together content and executable code into a
finished document. To learn more about Quarto see .

## Running Code

When you click the **Render** button a document will be generated that
includes both content and the output of embedded code. You can embed 
code like this:

```{r}
1 + 1
```

Quarto: Howto use a custom (Web)font?

1 Answers