Including fonts in Quarto HTML document

I generate HTML reports for clients using R and Quarto to render them. Our company brand has several specific fonts. I use a .css file to specify these (and more).

When a client opens the report, will these fonts be included? Are they downloaded automatically if they are not on the clients machine? How do I test this?

---
title: Are my fonts included?
format: 
  html:
    embed-resources: true
    css: styles.css
---

# My Header

The quick brown fox jumps over the lazy dog.

Here is my styles.css file:

h1 {
  font-size: 28pt;
  font-family: 'Bebas Neue';
  color: black;
  border-bottom: 1px;
  border-color: rgb(248, 250, 252);
  padding-bottom: 0pt;
}

p {
  font-size: 11pt;
  font-family: 'Aktiv Grotesk';
  color:black
}

You can do this by including the font file locations in your .css file so the fonts are encoded into the document when it is rendered (embed-resources: true is required, as per your current YAML). Note that 'Aktiv Grotesk' is not a free font so I've replaced it with 'Roboto' in this example.

In your .css file include:

@font-face {
  font-family: "Bebas Neue";
  src: url("\path\to\fonts\BebasNeue-Regular.ttf");
}

@font-face {
  font-family: "Roboto";
  src: url("\path\to\fonts\Roboto-Regular.ttf");
}

h1 {
  font-size: 28pt;
  font-family: 'Bebas Neue';
  color: black;
  border-bottom: 1px;
  border-color: rgb(248, 250, 252);
  padding-bottom: 0pt;
}

p {
  font-size: 11pt;
  font-family: 'Roboto';
  color:black
}

Then when rendered the result should look like: