Simplest way to get local fonts in your shiny app?

[brodriguesco]

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

gfonts::setup_font(
  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:

library(shiny)
library(shinydashboard)


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

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

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)

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

shinyApp(ui, server)

What am I missing?

[nirgrahamuk]

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

[brodriguesco]

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!