Change the Color and Font of Text in Shiny App in R

Shiny is an R package that provides tools for the creation of web applications (apps) directly in R, and the ability to select the color and font of text in Shiny apps can greatly improve the appearance of such apps. This article is going to help you understand how to change the color and font of text in Shiny with the help of the R Programming Language.

Color and Font of Text in Shiny

Shiny is an R application that helps developers build web applications using R. It also offers a graphical method for analysis and visualization. Adjusting the text color and font of your Shiny app means that your application will look as professional and eye-friendly as a professionally designed webpage.

In the Shiny app, style the text color with inline CSS or external CSS. Here are some methods of achieving this.

1. Customizing Text Color using Inline CSS

When placed in a specific location, inline CSS is a fast method to alter the text color within the UI definition.

# Load necessary library
library(shiny)

# Define UI
ui <- fluidPage(
  tags$h1("This is a Heading", style = "color: blue;"),
  tags$p("This is a paragraph.", style = "color: green;")
)

# Define server logic
server <- function(input, output) {
}

# Run the application
shinyApp(ui = ui, server = server)

Output:

2. Customizing Text Color using External CSS

For more complex styling, it’s often better to use an external CSS file. This approach keeps your UI code cleaner and allows for easier maintenance.

/* styles.css */
.heading {
  color: blue;
}

.paragraph {
  color: green;
}

Create a file named styles.css in the www directory of your Shiny app (create the directory if it doesn’t exist).

Link the CSS File in Your Shiny App

# Load necessary library
library(shiny)

# Define UI
ui <- fluidPage(
  tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "styles.css")
  ),
  tags$h1("This is a Heading", class = "heading"),
  tags$p("This is a paragraph.", class = "paragraph")
)

# Define server logic
server <- function(input, output) {
}

# Run the application
shinyApp(ui = ui, server = server)

Output:

In this example, the CSS classes .heading and .paragraph are defined in the styles.css file and applied to the corresponding HTML elements.

1. Changing Text Font using Inline CSS

Customizing the font of text in Shiny can be done similarly by using inline or external CSS. You can specify the font family and other font-related properties using inline CSS.

# Load necessary library
library(shiny)

# Define UI
ui <- fluidPage(
  tags$h1("This is a Heading", style = "font-family: Brush Script MT';"),
  tags$p("This is a paragraph.", style = "font-family: 'Courier New'; font-size: 16px;")
)

# Define server logic
server <- function(input, output) {
}

# Run the application
shinyApp(ui = ui, server = server)

Output:

2. Changing Text Font using External CSS

Using an external CSS file allows for more comprehensive and maintainable styling.

/* styles.css */
.heading {
  font-family: 'Arial';
}

.paragraph {
  font-family: 'Courier New';
  font-size: 16px;
}

Update your styles.css file to include font styling.

Link the CSS File in Your Shiny App

# Load necessary library
library(shiny)

# Define UI
ui <- fluidPage(
  tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "styles.css")
  ),
  tags$h1("This is a Heading", class = "heading"),
  tags$p("This is a paragraph.", class = "paragraph")
)

# Define server logic
server <- function(input, output) {
}

# Run the application
shinyApp(ui = ui, server = server)

Output:

Conclusion

Depending on one’s objective or the purpose of creating the Shiny app, it may be exceedingly beneficial to customize the colour and font of the text. Inline CSS and link to external CSS both give a good method of styling the text components in the Shiny app. If you apply these techniques, you should be able to come up with more attractive Shiny applications that will help meet your users’ needs.