List of available fonts for mainfont HTML option?

[mikemklee]

I am trying to see if I can set a different font for my Quarto website, using the mainfont HTML option as described here:
https://quarto.org/docs/reference/formats/html.html#fonts

The description just says that it sets the font-family for the HTML document.
However, I cannot find information on what might be a valid value for the property.

For example, do I need to have the font included in my repository to be able to use it?
or can I just set it to any google font name?

[mikemklee]

I was able to use any google font by doing the following:

format:
  html:
    mainfont: "'Source Serif Pro', serif"

[jimjam-slam]

AFAIK Quarto doesn't embed or import a Google Font if you specify it using the mainfont option, so you might want to check that this still works on other devices (eg. your phone) - if you have the font installed locally, you might not notice it not working!

To be safe, I'd probably add the @import statement from Google Fonts like:

format:
  html:
    mainfont: "'Libre Franklin', sans"
    include-in-header:
      text: |
    <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap');</style>

[mikemklee]

@jimjam-slam great callout; i noticed that for some reason the fonts were not loading when published, so I adapted your suggestion and included a HTML snippet to load the fonts like so:

[jimjam-slam]

Nice! If you already have a stylesheet of your own that you're loading in (like styles.css above), you can actually just put the @import url(); statement at the top of that (without <style></style>) instead of having to maintain a separate html file!

[mikemklee]

so true, so much cleaner that way! thanks <3