How to use local fonts with revealjs and embed-resources?

[produnis]

Description

How can I use local fonts with quarto and revealjs, while the parameter embed-resources is set to true?

In my scss, I declare the font as following:

/*-- scss:defaults --*/
//$font-family-monospace: "Roboto Mono" !default;
$font-family-sans-serif: "Roboto Mono" !default;


@font-face {
  font-family: 'Roboto Mono';
  src: local('Roboto Mono'), url('fonts/RobotoMono.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

This only works, if Robot Mono is installed system wide as a font.

How can I embed that local font in my presentation?

[jimjam-slam]

You'll probably also need to add the font file as a site resource to ensure it's copied correctly to your rendered site 😊

[cderv]

This will work if you want to provide a local font with your website, but not sure it will help with the embedding of a local .ttf file into a single HTML document (which you would expect with embed-resources: true) 🤔

[mcanouil]

FYI:

• Track resources inside styles #7470

[jimjam-slam]

Oh, I missed that part! Thanks!

[cderv]

I wonder if embed-ressources: true will know how to embed a font you defined in the .scss theme file.

It may not work currently, and local() won't be replaced by an embed fonts.

Did you try setting the local fonts using YAML configuration ? https://quarto.org/docs/reference/formats/html.html#fonts

This way, pandoc will know about the fonts, and will probably embed it correctly. 🤔

If would help if you can provide a full reproducible example so that we can look into, and if this is not yet supported open an issue to look in the future if we can embed a local fonts easily.

Thank you

[produnis]

I added a working example here:
https://github.com/produnis/quartofonttes

The trick was to use "ressources" in the yaml header

revealjs:
    resources:
      - fonts/Roboto-Mono-regular.woff2
      - fonts/Vollkorn-Bold.woff2
      - fonts/Vollkorn-BoldItalic.woff2
      - fonts/Vollkorn-Italic.woff2
      - fonts/Vollkorn-Regular.woff2

and to use relative paths (five times ../ ) in the SCSS files, like

@font-face {
  font-family: 'Roboto Mono';
  src: url('../../../../../fonts/Roboto-Mono-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

thx for your help!

[chamaoskurumi]

mh the link you provided seems to be down. Did you delete the repo?

[leonardblaschek]

Just for posterity, this approach requires woff font files and won’t work with otf, as far as I can tell.

[frodew]

For anyone stumbling on this issue in the future (thanks for the answer!):

The accepted solution still works, but not when you create a quarto-website. There you only need 4 "../" because the base directory seems to be a different one there. And depending on your setup, for example if you use it through an installed extension, you need to change the file-path accordingly. You can find a working example here in the unima.scss-file.