Simplest way to get local fonts in your shiny app?

Hello all,

I’m trying to find the simplest way to include custom, local, fonts into my shiny app.
I’ve tried the following approach: download fonts using

  id = "baloo-2",
  output_dir = "my_app/www/"

This creates a fonts/ directory with all the fonts inside the www/directory of my app, as well as baloo-2.css inside www/css/. I get a message in my console stating

✲ Please use `use_font("baloo-2", "www/css/baloo-2.css")` to import the font in Shiny or Markdown.> 

However, I would prefer not to have to install {gfonts}, as I don’t control the server. Instead I try to add the following line in my app, like so:

tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "css/baloo-2.css"))),

This however does not work (I also tried locally with gfonts::use_font() just to see, but it doesn’t work either). I see "baloo-2.css" in my sources when I inspect the page in a web browser, but the file is empty. Also, the folder containing the fonts is not listed.

Here is a minimal app for reproducibility purposes:


ui <- dashboardPage(
    title = "Basic dashboard"
    #gfonts::use_font("baloo-2", "www/css/baloo-2.css"),
           tags$link(rel = "stylesheet", type = "text/css", href = "css/baloo-2.css")
      box(plotOutput("plot1", height = 250)),

        title = "Controls",
        sliderInput("slider", "Number of observations:", 1, 100, 50)

server <- function(input, output) {
  histdata <- rnorm(500)

  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$slider)]

shinyApp(ui, server)

What am I missing?

I didnt see that there was an instruction in your app to use the font anywhere in particular, so I added inline css to apply it to every element ( i also set the colour to red so it can be seen easily what elements were touched)

      tags$link(rel = "stylesheet", type = "text/css", href = "css/baloo-2.css"),
      tags$style("* {color:red !important;;
                 font-family:'Baloo 2' !important;}

I knew I was missing something obvious! Of course I have to specify which text elements the font needs to be applied to!

Many thanks!

This topic was automatically closed 7 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.