Garrett Catlin

February 23, 2023

Import Custom Fonts in R Shiny

It's of my opinion that, generally speaking, Shiny apps tend to be utilitarian in design, as opposed to visually-attractive. There's nothing inherently wrong with this as it seems as though many Shiny developers didn't get their degree in UI - I certainly didn't. As such, my entire journey into the CSS and UI parts of Shiny has been somewhat of a mystical experience.

One of the first things many will point to in terms of a customized UI would be the font. For me, historically, changing the font has looked like inspecting each individual element I wanted to change and adding the changes to my .css file. Nothing terribly wrong with this and it certainly gets the job done. Take, the finale post for the love letters project, where I built a shiny app with some custom UI styling. Here's the app.

Screenshot 2023-02-23 at 1.10.25 PM.png

Notice something odd? When the app loads, it takes a second for the font to change to Incosolata, which I specified in the css file.

I recently discovered how to amend this: use @import with the url to your font in the css file. Here's a generic navbar page app that I created, that has that statement in context:

@import url("https://fonts.googleapis.com/css?family=Inconsolata");
Notice how, this time, the font loads automatically with no delay! You can view all code for the demo app on its Github.

Cheers,

Garrett C.

About Garrett Catlin

Your friendly neighborhood data scientist.