Add multiple local font-styles with bslibs 'bs_theme' (eg. normal, bold, italic)

Hi, I´m really struggling to load a locally stored font-family with multiple styles into shiny using bslibs font_face. I read through the documentation/ code/ tests but have no clue how to achieve it.

Here is an short reproducible example (> R 4.1)

library(shiny)
library(bslib)

# Borrow fonts from bslib ----
addResourcePath("fonts", system.file("fonts", package = "bslib"))

# Define font collection ----
fonts <- 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 = fonts),
  tags$p("Normal Text"),
  tags$b("Bold Text (seems bold, but actually is thickened  by browser)"),
)
shinyApp(ui, \(...){})

I expect the following CSS to be contained when executing my app:

@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/XRXV3I6Li01BKof4MQ.woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Instead I get the following when inspecting the app-ressources with the browser dev-tools:

@font-face {
  font-family: Nunito;
  src: url('../fonts/XRXV3I6Li01BKof4MQ.woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Only the first definition (normal font) is loaded, but the second (bold/700) is not added to my app. I think the font is still bold because the browser is able to thicken fonts (all the months font designers put into creating the bold style are thrown away).

Does someone knows how to also load the bold (and more styles) into my app?

This topic was automatically closed 21 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.