Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

r

fonts

shiny

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",
like image 927
SarahGC Avatar asked Jul 27 '17 19:07

SarahGC


People also ask

How do you change all fonts in HTML?

To change font type purely with HTML, use the CSS font-family property. Set it to the value you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a paragraph, heading, button, or span tag.

How do you change font color and family in HTML?

You can use a <basefont> tag to set all of your text to the same size, face, and color. The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the <font> tag.


1 Answers

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; }
like image 64
David Kris Avatar answered Sep 17 '22 23:09

David Kris