How can I extract the font from the 'lux' theme in bootswatch and use it in my R Shiny app using bslib?

Question

How do I extract a font from a bootswatch theme and use it in a R Shiny app?

I'm using the bslib library and trying to extract the font from the "lux" theme so I can use it with another theme.

I'm assuming it goes somewhere in the bs_add_variables function or base_font?

bs_add_variables(
    "font-family-base" = "monospace"

Answer 1

The base font family can be set directly via the base_font argument of bs_theme(). Using the base font for the Lux theme which is "Nunito Sans":

library(shiny)
library(bslib)

ui <- page_fixed(
  theme = bs_theme(
    version = 5,
    base_font = font_google("Nunito Sans"),
  ),
  h2("Hello world")
)
shinyApp(ui, function(...) {})

EDIT Replicating the look of the Lux theme requires more effort than just changing the base font, e.g. to replicate the look for the headings requires to set the font size and weight which could be achieved via BS variables and to add some additional CSS using bs_add_rules. But it's still not perfect.

library(shiny)
library(bslib)

ui <- page_fixed(
  theme = bs_theme(
    version = 5,
    base_font = font_google("Nunito Sans"),
    "h1-font-size" = "2rem",
    "headings-font-weight" = "600 !default"
  ) |> 
    bs_add_rules("h1 { text-transform: uppercase; letter-spacing: 3px;}"),
  h1("Replicating the \"Lux\""),
  h1("Hello world")
)

shinyApp(ui, function(...) {})

For comparison, using the Lux theme directly:

library(shiny)
library(bslib)

ui <- page_fixed(
  theme = bs_theme(
    version = 5,
    bootswatch = "lux"
  ),
  h1("Using bootswatch = \"lux\""),
  h1("Hello World")
)

shinyApp(ui, function(...) {})