quarto-dev / quarto-dev/quarto-cli

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

Open
#5,712 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug revealjs themes
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue with the linked quarto-custom-font-revealjs-reprex repository, using its index.qmd, styles.scss, and local font files. Inspect how styles.scss becomes index_files/libs/revealjs/dist/theme/quarto.css and how asset paths are handled. Done means local @font-face URLs work without repeated ../ prefixes.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, scss
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
40/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.