5

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.

Mike Wise
  • 22,131
  • 8
  • 81
  • 104
matsuo_basho
  • 2,833
  • 8
  • 26
  • 47
  • (Small remark - just in case if you don't know that there is a nice package [shinythemes](https://rstudio.github.io/shinythemes/) which contains 7 nice themes) – Michal Majka May 23 '16 at 19:54
  • @UnnamedUser, thanks. I want to use a specific custom font though, and that is the only thing that I want to change. – matsuo_basho May 23 '16 at 20:05
  • 1
    Which font? As in one you have installed already? Also what system are you using? Font stuff is slightly different for Windows/Mac/Linux. – Mike Wise May 23 '16 at 20:39
  • @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. – matsuo_basho May 23 '16 at 20:53
  • So, what do you think? – Mike Wise May 24 '16 at 14:05
  • Does [this](https://stackoverflow.com/questions/55100069/ggplot-with-customized-font-not-showing-properly-on-shinyapps-io/55158772#55158772) help? – symbolrush Jan 13 '22 at 15:50

1 Answers1

4

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:

enter image description here

Mike Wise
  • 22,131
  • 8
  • 81
  • 104
  • 1
    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}'))` – matsuo_basho May 25 '16 at 03:21
  • 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. – Mike Wise May 25 '16 at 07:56
  • 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.. – mdb_ftl Aug 30 '20 at 23:51