Font not loaded console error

[udurraniAtPresage]

I am using bslib in golem. In the app_ui.R, I specified the theme in app_ui function:

theme = bs_theme(
        version = 5,
        base_font = font_google("Libre Franklin"),
        preset = "shiny",
        heading_font = font_google("Libre Franklin")
      )

But I see Failed to load resource: the server responded with a status of 404 () in console. I am not sure what is missing.

[cpsievert]

Installing the latest {sass} will fix it: install.packages("sass")

The next version of {bslib} will require the latest {sass} (which contains the fix for this)

[udurraniAtPresage]

By the way, If I do the following, the error is gone locally but NOT on shinyapps:
In global.R:
addResourcePath("www", "www")

In ui.R:

theme = bs_theme(version = 5,
                  base_font = font_face( family = "Libre Franklin",
                                          src = "url('/www/LibreFranklin-Medium.ttf') format('truetype')"),  # font_google("Libre Franklin"),
                   preset = "shiny",
                   heading_font = font_face( family = "Libre Franklin",
                                             src = "url('/www/LibreFranklin-Medium.ttf') format('truetype')") # font_google("Libre Franklin")
  )

On shinyapps I see:

[udurraniAtPresage]

@cpsievert Any updates about this font issue?

[gadenbuie]

Hi @udurraniAtPresage, at this point I think it would be most helpful if you could create a complete, minimal, reproducible example.

[cpsievert]

I don't know for sure, but it seems like you're running into a weird caching issue. I would try resetting the file cache:

library(sass)
cache <- sass_file_cache(sass_cache_context_dir())
cache$reset()

[udurraniAtPresage]

Thank you for your responses. I tried after resetting but the "Libre Franklin" font is not used. After rewriting the app in {golem} framework, the error in console is gone (tested locally for now), but the "Libre Franklin" font is not used. The font resets to the default. The only thing that works is if I do:

body {
  font-family: "Libre Franklin";
}

in the styles.css under www.
I tried making a minimal reproducible example, but a simple app does not have the font issue. The font renders successfully in this app:

library(shiny)
library(bslib)

one_ui <- page_navbar(
  sidebar = sidebar(
    width = 280,
    ## Accordions
    accordion(
      open = FALSE,
      accordion_panel(
        "Accordion"
      ),
      accordion_panel("Panel 1"),
      accordion_panel("Panel 2"),
      accordion_panel("Panel 3")
    )
  )
)



two_ui <- page_navbar(
  sidebar = sidebar(
    width = 280,
    ## Accordions
    accordion(
      open = FALSE,
      accordion_panel(
        "Accordion"
      ),
      accordion_panel("Panel 4"),
      accordion_panel("Panel 5")
    )
  )
)



ui <- page_fluid(
  theme = bs_theme(version = 5,
                   primary = "#0072bc",
                   success = "#00a651",
                   danger = "#DC143C",
                   base_font = font_google("Libre Franklin"),
                   preset = "shiny",
                   heading_font = font_google("Libre Franklin")
  ),
  title = "Title",
  uiOutput("logged_in_ui", fill = TRUE)

)

server <- function(input, output, session) {

  condition <- sample(c(TRUE, FALSE), 1)

  output$logged_in_ui <- renderUI({
    if (condition){
      one_ui
    } else {
      two_ui
    }
  })
}

shinyApp(ui, server)

So, I'm not sure exactly what affects the font in the main app. The app_ui uses the bslib::bs_theme just like the example above.

I checked thoroughly but am not using any other font anywhere else in the app or css.

[cpsievert]

Are you able to replicate the issue by running the app locally on your machine? Or only when running the app is running on another server? If the latter, I'd try running this code on that server

[udurraniAtPresage]

On my machine and on the shinyapps, I see the right font. I even see the right font on android. But my team members on Mac and iPhone do not see the Libre Franklin font. They see the default font.

[udurraniAtPresage]

Update: bslib::bs_theme() did not make any changes to the font when put inside golem_add_external_resources(), but when put directly in app_ui it does.