How to use Custom Font in Shiny App

shiny
1

Hi,

I have a custom font which I have downloaded from Web. It is .ttf format. Now, I want to use that font in my Shiny app through some CSS file. Below are my codes :slight_smile:

ui.R

library(shiny)

shinyUI(fluidPage(

  tags$head(
    includeCSS("CSS.css")
  ),
  

  headerPanel(p(class = "p_Style", "Interactive Histogram")),
  sidebarPanel(
    numericInput("n", "Generate this many points", 
                   min = 1, value = 1000),
    selectInput("family", "From this family",
              choices = c("Normal",
                          "Uniform",
                          "Exponential"),
              selected = "normal"),
    sliderInput("bins", "number of bins", 
                min = 1, max = 100, value = 50)
    ),
  mainPanel(
    plotOutput("histogram")
  )
))

server.R

library(shiny)

shinyServer(function(input, output) {
  data <- reactive({ 
    FUN <- switch(input$family,
                  "Normal" = rnorm,
                  "Uniform" = runif,
                  "Exponential" = rexp)
    FUN(input$n)
  })
  
  output$histogram <- renderPlot({
    hist(data(), breaks = input$bins)
  })

})

CSS.css

@font-face {  
  src: url(Kirnberg.ttf);
  font-family: "Kirnberg";
}

.p_Style {
	font-family: 'Kirnberg';
	color: red;
}

My Font-file is available at this link : https://ufile.io/sy3f0

However clearly my App is not considering my custom font. I have gone through various Web-suggestions, however all of them pointing to Google-font, not really any Custom font which is save in the Disk.

Could you please help me what is the right approach to achieve the same.

Thanks for your pointer.

1 Like
2
  1. Create www folder in the same directory of your app.
  2. Put the Css.css file and the download source of kirnberg.ttf in www folder
  3. update the tags$head with: includeCSS("www/CSS.css")
    I hope it works for you.
2 Likes