revealjs: specifying a font-face using local files requires annoying use of ../

[EmilHvitfeldt]

Bug description

If you want to use a font from a file you need to use a lot of ../ to get to the right area. If both your styles.scss file and the font files are in the same directory as index.qmd you need to prefix the file names with ../../../../../ since the compiled scss ends up in index_files/libs/revealjs/dist/theme/quarto.css but the fonts stay where they are.

Steps to reproduce

Repo: https://github.com/EmilHvitfeldt/quarto-custom-font-revealjs-reprex

Page: https://emilhvitfeldt.github.io/quarto-custom-font-revealjs-reprex/

Expected behavior

It would be lovely if the @font-face could be specified with the following code

@font-face {
    font-family: 'FiraCode';
    src: url('FiraCode-Regular.woff2') format('woff2'),
         url('FiraCode-Regular.woff') format('woff');
}

Actual behavior

Where as now, you have to specify to a variant of

@font-face {
    font-family: 'FiraCode';
    src: url('../../../../../FiraCode-Regular.woff2') format('woff2'),
         url('../../../../../FiraCode-Regular.woff') format('woff');
}

Your environment

• IDE: Version 2023.05.0-daily+206 (2023.05.0-daily+206)
• OS: macOS Monterey version 12.6

Quarto check output

[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.2: OK
      Dart Sass version 1.55.0: OK
      Deno version 1.33.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.4.92
      Path: /Applications/quarto/bin

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.9.7 (Conda)
      Path: /Users/emilhvitfeldt/miniforge3/bin/python
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with conda install jupyter

[✓] Checking R installation...........OK
      Version: 4.2.1
      Path: /Library/Frameworks/R.framework/Versions/4.2-arm64/Resources
      LibPaths:
        - /Users/emilhvitfeldt/Library/R/arm64/4.2/library
        - /Library/Frameworks/R.framework/Versions/4.2-arm64/Resources/library
      knitr: 1.43
      rmarkdown: 2.21

[✓] Checking Knitr engine render......OK

[coatless]

I think this is similar to the image asset note raised in:

#5694

[cderv]

@EmilHvitfeldt did you try to do the same kind of thing without revealjs and just html format ?
Do you know if there is the same kind of problem ?

We use sass also for HTML custom .scss to mix with Bootstrap .scss, so I wonder if we resolve it better 🤔

Thanks @coatless , yes same problem !

[EmilHvitfeldt]

When I use html format like so:

---
format:
  html: 
    theme: [default, styles.scss]
---

I get the following arrow (when using ../../../../../)

ERROR: NotFound: No such file or directory (os error 2): lstat '/FiraCode-Regular.woff2'

Stack trace:
    at Object.lstatSync (ext:deno_fs/30_fs.js:339:7)
    at copyTo (file:///Applications/quarto/bin/quarto.js:36959:26)
    at doCopy (file:///Applications/quarto/bin/quarto.js:36998:9)
    at copyFileIfNewer (file:///Applications/quarto/bin/quarto.js:37015:9)
    at copyDependencyFile (file:///Applications/quarto/bin/quarto.js:57768:5)
    at copyFile (file:///Applications/quarto/bin/quarto.js:57706:13)
    at file:///Applications/quarto/bin/quarto.js:57759:54
    at Array.forEach (<anonymous>)
    at processHtmlDependencies (file:///Applications/quarto/bin/quarto.js:57759:34)
    at readAndInjectDependencies (file:///Applications/quarto/bin/quarto.js:57646:26)

but get correct results when using

@font-face {
    font-family: 'FiraCode';
    src: url('FiraCode-Regular.woff2') format('woff2'),
         url('FiraCode-Regular.woff') format('woff');
}