My local font is not rendered properly, probably due to path declartion on the scss file

[uriahf]

Description

Hi all, really tried to work on this one but I didn't find any solution yet.

I'm trying to render my quarto revealjs through gh-actions on gh-pages, while it works well on local rendering it does not work properly when I try to render it on gh-pages:

https://uriahf.github.io/causal_bounds_with_dags/causal_bounds_with_dags.html#/title-slide

Local Rendering

gh-pages result

That's my scss file:
https://github.com/uriahf/causal_bounds_with_dags/blob/main/custom-fonts.scss

I'm 99% sure that it got something to do with absolute / relative paths for the local fonts, but I didn't find any solution yet.

I already tried changing

@font-face {
  font-family: "FrauncesLocal";
  src: url("../../../fonts/Fraunces9pt-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}

to

@font-face {
  font-family: "FrauncesLocal";
  src: url("fonts/Fraunces9pt-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}

Repo: https://github.com/uriahf/causal_bounds_with_dags

Thanks!

[mcanouil]

@uriahf

Important

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

[uriahf]

I've edited the original post, is that ok now?

[mcanouil]

Yes, I can see the alternative texts.
Thanks!

[mcanouil]

Did you look at related discussions/issues? (non exhaustive list)

• Using a custom local font file with revealjs presentations #3064
• revealjs: specifying a font-face using local files requires annoying use of ../ #5712

[uriahf]

I have, and I tried several combinations of the solutions mentioned - unfortunately none of them worked.

[mcanouil]

Unfortunately, #5712 is what you are facing it seems, so you need to figure out somehow the ../ times needed.

It might be easier to set your local font into a _brand.yml as a workaround.

[uriahf]

_brand.yml was my first choice, I actually used scss as a workaround for _brand.yml...

[mcanouil]

I don't follow. What do you mean?

[uriahf]

I would rather declare local fonts through my _brand.yml file, but that approach failed as well... I also tried all kinds of variations of ../../..

Maybe it got something to do with me using renv?

[uriahf]

Not sure why, but the local fonts are rendered well on Netlify:
https://causalbounds-puremediators.netlify.app/

I ran my github workflow with both gh-pages and Netlify:
https://github.com/uriahf/causal_bounds_with_dags/actions/runs/19592761234/job/56113280945

[mcanouil]

That's odd, maybe check your website resources location/definition in your output directory.

I'm less encline to believe the issue is Quarto CLI, as publishing is independent of rendering as it is done with quarto render then there are few steps to basically copy the output directory.
Or the issue is specific to quarto publish gh-pages, e.g., some files are not committed.

By the way, when publishing to multiple places, you should use the render action, then the publish action with render: false.

You might want to try using: ../../../../fonts as the compiled SCSS will live at site_libs/revealjs/dist/theme/quarto-06d95d5973c71a01de131b2c50c9beb0.css.

[uriahf]

I already tried using ../../../../fonts path and it didn't work.

Honestly I'm ok with just keep using netlify for now, my presentations are already published and I'd rather stop experimenting for now.

Either way thank for your help and for your hard work maintaing quarto! All the slides are gathered here if you are just curious 😁