Using a custom local font file with revealjs presentations

[apreshill]

Hello 👋

I need to use a local font file in a Quarto-rendered revealjs HTML presentation. I can get the font to render locally, but not when deployed to GitHub pages. Here is a reprex repo:

https://github.com/apreshill/reveal-fonts-reprex

The rendered deck: https://apreshill.github.io/reveal-fonts-reprex/

Note that I have embed-resources: true in the YAML: https://github.com/apreshill/reveal-fonts-reprex/blob/f2461431caa84681d45bbb8b06e387ee04b92918/index.qmd#L3 (it didn't work with this set to true or false though)

I get this error rendering locally after adding that to my YAML:

pandoc: /fonts/bodoni-moda-v7-latin-regular.woff2: openBinaryFile: does not exist (No such file or directory)

I've tried all manner of file path combinations here since this looks like pandoc is struggling to find the file based on my file path, but I'm getting nowhere.

Here is what it looks like locally (with the custom font working fine):

Any pointers? Thanks.

[cscheid]

Hi! 👋 This looks like a bug. I'll open an issue to track!

[apreshill]

Hey @cscheid - you made my day, thank you! I'm SO happy to hear this should work 😹 Thought I'd lost my touch!

[gadenbuie]

I think there might be two things going on here. The Quarto bug is that the @font-family rule isn't among the final CSS rules (it should be because it's under /*-- scss:rules --*/). I think you can get around this by moving that rule to a .css file. (I was seeing this problem with quarto 1.1.251.)

The second issue is that the font-face src url() should start with ./fonts/ or no leading slash fonts/.

Both in action: gadenbuie/reveal-fonts-reprex@9582d15

[apreshill]

Thank you! I tried all of those combinations of urls too with no luck locally, but sounds like the Quarto bug may have been masking that.

[apreshill]

Thank you both! For posterity this worked 🎉 -ish

apreshill/reveal-fonts-reprex@d23c285

Elements:

1. MUST have css key in YAML used to define the local font face
2. MUST have theme key in YAML used for .scss file WITHOUT loading local font face
3. MUST have /*-- scss:rules --*/ section in the .scss file even if empty, otherwise Quarto errors
4. MUST use relative url() for font file path (for the record, I started here! But it didn't work locally, it only worked with the slash in front 🤷 )

[EmilHvitfeldt]

This is a little different direction, does this work: https://www.emilhvitfeldt.com/post/slidecraft-code-output/#use-fonts-with-ligatures

[apreshill]

Thank you @EmilHvitfeldt! I shudder to think how long it took you to figure out that path 🐰 🕳️ I'm reasonably happy with the solution, however, am giving self a pass that I didn't intuit it on my own either - this was tricky business 😞