How to use a custom font in an RShiny App

Question

I would like to incorporate a custom font in my Rshiny App. I have a hunch the code would go in tags$style, but haven't the actual code to include this.

Example code:

ui <- fluidPage(
        tags$style(  ),
        column(12,
                dataTableOutput("testtab")
              ) # close column
) #close fluidpage

server <- function(input, output, session) {
  output$testtab <- 
        DT::renderDataTable({
                               tab <- data.frame(a = 1:10, b = 11:20, c = 21:30)
                               dat.tab <- datatable(tab) %>% formatPercentage('a', 0) %>% 
                                                          formatCurrency(1:ncol(tab), '$')
                              return(dat.tab)
                            }) # close renderDataTable
} # close server

shinyApp(ui=ui, server=server)

For example's sake, let's say I want to use any custom font out there on the web.

Fy

(Small remark - just in case if you don't know that there is a nice package shinythemes which contains 7 nice themes) – Sudan

@UnnamedUser, thanks. I want to use a specific custom font though, and that is the only thing that I want to change. – Fy

Which font? As in one you have installed already? Also what system are you using? Font stuff is slightly different for Windows/Mac/Linux. – Penney

@MikeWise, no, I do not have the font installed. Let's say it's this font: http://www.fontspace.com/gunarta/surabanglus. I'm using Windows. – Fy

So, what do you think? – Penney

Does this help? – Antaeus

Answer 1

This should help.

First you need to download the font from http://www.fontspace.com/gunarta/surabanglus and install it by clicking on the file with the ttf extension and clicking install. Here I have added tags to control the default body font, and tags that use the "id tag" to control the fonts in specific controls and the background colors.

There are other ways to do this using seperate CSS files, etc. But this is quick and easy and not too dirty.

library(shiny)
library(dplyr)
library(DT)

ui <- fluidPage(
  tags$style(HTML('body {font-family:"Times New Roman",Georgia,Serif; background-color:orange}')),
  tags$style(HTML('#testtab {font-family:"surabanglus",Georgia,Serif; background-color:lightblue}')),
  tags$style(HTML('#hello2 {font-family:"Courier",Georgia,Serif; background-color:pink}')),
  column(12,
         dataTableOutput("testtab"),
         actionButton("hello1","Hello There (uses font inherited from body)"),
         actionButton("hello2","Hello There again (uses Courier)")

  ) # close column,
) #close fluidpage

server <- function(input, output, session) {
  output$testtab <- DT::renderDataTable({
    tab <- data.frame(a = 1:10, b = 11:20, c = 21:30)
    dat.tab <- datatable(tab) %>% formatPercentage('a', 0) %>% 
      formatCurrency(1:ncol(tab), '$')
    return(dat.tab)
  }) # close renderDataTable
} # close server

shinyApp(ui=ui, server=server)

Yielding this:

Penney

this looks good, and works if I just copy your code from above. However, I can't get it to work on my computer with the actual font I have. My tab has two words as the title, perhaps that's the issue: tags$style(HTML('#body {font-family:"surabanglus",Georgia,Serif}')), tags$style(HTML('#Tab one {font-family:"surabanglus",Georgia,Serif}')) – Fy

It is best to keep questions and answer short and sweet, and this was a pretty successful question and answer already, so I would suggest you just mark it correct and post another question about that one. Would be in everyone's interest. – Penney

Hi, will this work with shiny.io? It works when I install the font locally and run the app on my computer - but when I publish to shiny.io (including the .tff files in the www folder), the fonts do not render online.. – Magnus