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

Question

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",

Solution 1

You can put the font-family you want in a body selector

body {
  font-family: Arial;
}

Or using the universal selector * will change every element

* { font-family: Arial; }

Solution 2

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

2. straight into your R code:

ui <- dashboardPage(dashboardHeader(), dashboardSidebar(), dashboardBody(),
                  tags$head(tags$style(HTML('* {font-family: "Arial"};'))))

Solution 3

Well, this isn't my favorite to do this but this will work. Pretty sure you're going to have to rock the !important otherwise you'll get beat out by the cascade on some elements.

Edit: Tested on a few sites to confirm. Was unable to get EVERYTHING to change without the !important

CSS:

* {
  font-family: Arial, sans-serif !important;
}

* = Match All Elements