Change font family throughout entire R Shiny App: CSS/HTML

user_7107269 0
Viewed 12504

Is it possible to change the default font of an entire shiny dashboard app? Including font for the sidebar, body, header, ggplots within the app, etc?

I know you can add font-family statements within each piece ( example: h2(strong(textOutput("t")), style = "font-family: 'Arial';")), but I want my entire app to use Arial and I don't want to have to write a line of code for every single feature. Is there a short cut?

Also, inline CSS is preferred to a separate css file if possible.

Thanks, Sarah

Edit:

Here is some of my code. Could you show me where I would put the necessary CSS? 

body<-dashboardBody( tags$style(".content {background-color: black;}"),
                 useShinyjs(),
                 tags$style(type='text/css', ".skin-blue .main-header .logo {background-color: #000000}" ),
                 tags$style(type='text/css', ".skin-blue .main-header .logo:hover {background-color: #000000}"),
                 tags$style(type='text/css', ".skin-blue .main-header .navbar {background-color: #000000}"),
                 tags$style(type="text/css",".shiny-output-error { visibility: hidden; }",".shiny-output-error:before { visibility: hidden; }"),
                 fluidPage(
                   img(src="img2.PNG",height="100%", width="100%",style='padding:0px;'),
                   br(),br(),
                   tabBox("Menu Database", width = 12,
                          tabPanel("Menu Database", 
                                   tabsetPanel(
                                     tabPanel("LTO Survey results",
shiny fonts r css html
3 Answers

Accepted answer of @David Kris is absolutely correct, just in case someone (like me) needs a little more elaboration. As mentioned in his answer, insert the code

 * { font-family: "Arial"; }

either in

  1. a css file (shiny.rstudio.com/articles/css.html), for those lazy (like me):
  • create a folder www in your app directory,
  • place bootstrap_custom.css file in it with just the code above,
  • in your R code, use
ui <- dashboardPage(dashboardHeader(), dashboardSidebar(), dashboardBody(),
                  tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "bootstrap_custom.css"))

OR

  1. straight into your R code:
ui <- dashboardPage(dashboardHeader(), dashboardSidebar(), dashboardBody(),
                  tags$head(tags$style(HTML('* {font-family: "Arial"};'))))
user_146318460
Related