rstudio / rstudio/bslib

Allow adding multiple local font-styles with bs_theme & font_face

Open
#376 5 comments 2 reactions 0 assignees View on GitHub

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

  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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.