Using a personalized font in your RShiny application

I'm interested in integrating a unique custom font into my Rshiny App. I have a feeling that the necessary code should be placed within tags$style, but I am unsure of the exact syntax needed for this integration.

Below is an example code snippet:

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)

Just as an illustration, let's assume I want to utilize any custom font available on the web.

Answer №1

Utilize this guide for assistance.

To begin, download the desired font from and proceed to install it by selecting the file with the ttf extension and clicking on the install option. I have included tags here to manage the default body font as well as use of an "id tag" to control fonts in specific functionalities along with background colors.

Although there are alternative methods like utilizing separate CSS files, this method is efficient, simple, and does not clutter the code too much.

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)

Resulting in:

https://i.sstatic.net/GQ0xw.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to center text in a DIV using CSS Bootstrap?

I'm a beginner in front-end development and I'm struggling to center the text below the image within this div. I want the text centered just below the image. I'm using Bootstrap for this project, and here's the code snippet I'm wor ...

My HTML and CSS design is not displaying correctly on mobile devices

Currently, I am in the process of utilizing a free website template. However, I am facing an issue with adjusting the background image. Is there anyone who can provide some guidance on resolving this particular problem? I would be happy to share the code ...

How to set a maximum width in IE8 when using width:100%?

After researching online, I am still unable to get it to work. I have a basic HTML layout that I have been testing across different browsers. Knowing the quirks of IE, I wasn't surprised when the max-width CSS code didn't function as expected. Ho ...

Expanding content to cover the entire width using CSS Bootstrap 5

As a newcomer to Bootstrap, I am working on customizing an existing Bootstrap example. My objective is to expand the width of the div tag (with id "inner") to fill the entire screen. I have experimented with various approaches, such as resetting the margi ...

Customize CSS for Vimeo's HTML5 player

Can I customize Vimeo's HTML and CSS attributes? I have a video that autoplays and I don't want the play button. I want to modify this specific class. .a.l .b .as { position: absolute; top: 50%; left: 50%; margin: -2em 0 0 -3.25em; float: none; ...

Is it possible to reverse the effects of @media queries for min/max width and height?

I rely on http://www.w3.org/TR/css3-mediaqueries/ to customize my design based on the available viewport size. When I need to adjust the breakpoints, I struggle with negating @media (min-width: 500px), which overlaps with (max-width: 500px). To counter th ...

Div elements containing identical content and styled in the same manner exhibit distinct dashed borders

After designing a pen with a unique twist, you'll notice that the first div has a border-bottom, while the second has a border-top. What's interesting is that the border on the second div is not the same as the first. Visit this link to see for ...

Unable to view image when using material-ui CardMedia component

Hello, I've encountered a problem with rendering an image in my application. Let me explain the issue in a simplified manner. So, I have a card component (MyCardComponent) where I need to pass a string prop containing the image file location. The goa ...

Is it possible to prevent a webpage from being refreshed?

I need help with an HTML page that puts the worker on pause time which will be subtracted from his/her day job. The issue is that when he/she refreshes the page, the timer starts from the beginning automatically. I want it to continue without resetting. Is ...

The horizontal rule element is not displaying

My <hr> element seems to be hidden. This is the HTML code: <div id="line"><hr /></div> And this is the CSS code: hr { border: 0; width: 96%; color: #FFFF00; height: 1px; } #line { float: left; width: 73 ...

Angularjs drop-down menu changes images with animation

<body ng-controller="myCtrl"> <input type="checkbox" ng-model="loaded"/> <select ng-model="list"> <option ng-repeat="option in data.availableOptions" value="{{option.name}}">{{option.id}}</option> </select> {{list}} &l ...

In an HTML table, configure a column to expand to fill the remaining space while also having a minimum width of 300

Is there a way to create a column in the middle of an HTML table that fills the remaining space with a minimum width of 300px? Take a look at this JSfiddle for reference. HTML: <table> <tr> <td class="fixed-width">Fixed width col ...

What causes my data to be transformed into characters when I generate a time series?

Currently, I am in the process of conducting an adf.test to determine whether the variables in my time series exhibit stationarity or non-stationarity. However, upon creating my time series data, datnew<-cbind(Date,Temp,GHG,SOX,SOL) datts<-ts(datnew ...

Exploring Browser History using Cascading Style Sheets

Currently, I am in need of researching a topic for my University project. Unfortunately, the internet has not provided me with any information on this specific subject. The task at hand is as follows: "How and under what circumstances can one uncover ...

Unable to modify the width of textarea

I've been struggling to adjust the width of a textarea element, as neither setting rows and cols in HTML nor using CSS has worked for me. The height adjustment was successful with HTML. Any tips on changing the width? form, label { position: rel ...

What is the best way to make an element disappear 5 seconds after the mouse has stopped hovering

#section1 { display: block; } #section2 { display: none; } #container:hover > #section2 { display: block; } <div id="container"> <div id="section1">Section1</div> <div id="section2">Section2</div> </div> ...

How can you find the average of a single column in various .csv files?

I am new to programming in R and need assistance in calculating the mean of the 'sulf' column from 332 files. The mean calculation works fine when I have just 1 file, but I am facing challenges when trying to perform the same calculation across m ...

Stop images from flipping while CSS animation is in progress

I've been developing a rock paper scissors game where two images shake to mimic the hand motions of the game when a button is clicked. However, I'm facing an issue where one of the images flips horizontally during the animation and then flips bac ...

Remove checked rows in a table with a single click

I have created a table with a list and checkboxes next to each element. There is also a Delete button that I want to connect to the delete operation. Here is the code for the Delete button: <tr id="deleteproject" > <td wi ...

Disable the "top" property for the Material UI Drawer component

I'm currently working on implementing a Persist Left Drawer from Material UI that slides in from the left side. However, I don't want the drawer to cover the entire left side of the page. Essentially, I want to remove the "top" style property men ...