quarto-dev / quarto-dev/quarto-cli
revealjs: specifying a font-face using local files requires annoying use of ../
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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