Allow adding multiple local font-styles with bs_theme & font_face
Nobody has claimed this yet.
- Dominant language
- SCSS
- Stars
- 569
- Forks
- 72
- Avg merge
- 1d 2h
- Merged PRs (30d)
- 5
Description
Hi,
either I can´t figure it out, or it is not possible as of now.
I´m not able to pass more than one style from a font-family to bs_theme (e.g normal, bold, italic from 'Open Sans').
Reprex
library(shiny)
library(bslib)
library(htmltools)
# Borrow fonts from bslib ----
addResourcePath("fonts", system.file("fonts", package = "bslib"))
# Define font collection ----
nunito <- font_collection(
font_face("Nunito", weight = 400, style = "normal", src = "url('../fonts/XRXV3I6Li01BKof4MQ.woff')"),
font_face("Nunito", weight = 700, style = "normal", src = "url('../fonts/XRXW3I6Li01BKofAjsOkZQ.woff')")
)
ui <- fluidPage(
theme = bs_theme(base_font = nunito),
tags$p("Normal Text"),
tags$b("Bold Text (seems bold, but is thickened by browser I suppose)"),
)
shinyApp(ui, \(...){})
As I inspect this app via the browser dev-tools, I can see this CSS declaration (../_Nunito-0.4.0/font.css):
@font-face {
font-family: Nunito;
src: url('../fonts/XRXV3I6Li01BKof4MQ.woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
My font is included 🎉 but only the first style (weight 400) -> bold/700 is missing. Here´s what I would expect in the file:
@font-face {
font-family: Nunito;
src: url('../fonts/XRXV3I6Li01BKof4MQ.woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Nunito;
src: url('../fonts/XRXW3I6Li01BKofAjsOkZQ.woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}
The browser still produces a thickened text (reprex), but I think this is some browser-magic and not the months of work the font designer put into developing the bold style as it is missing in the font-face declaration.
Contributor guide
No contributing guide indexed for this repository
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 with the font_collection() and font_face() calls in the supplied R reprex, then inspect the generated ../_Nunito-0.4.0/font.css output. Compare the result with the two @font-face declarations shown in the issue and rerun the Shiny example. Done means the generated CSS includes both the 400 and 700 font definitions and the browser uses the supplied bold font.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- r, sass
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100