Custom fonts with CSS on shinyapps.io

I've used the {fresh} package to create a custom CSS for my shiny app. This features a custom font (Arial Nova Light) for the body and tab title text.

When I deploy to shinyapps.io, I see this custom font (presumably because it is installed on my local machine) but other users of the app cannot see it. I assume that I somehow need to install the font on the server, but my attempts to do this have been unsuccessful.

I tried the approach described here (https://stackoverflow.com/a/55159245/9931263) of putting this code at the top of my ui.R file to create a fonts folder on the server and copy the font over to it

dir.create("~/.fonts")
file.copy("www/fonts/ArialNova-Light.ttf", "~/.fonts")
system("fc-cache -f ~/.fonts") 

Running system('fc-list') after this shows that the font was copied over ok, but it still doesn't appear in the app.

I also tried using inline CSS to bring the font in, but had no luck with that either.

@font-face {font-family: 'Arial Nova Light'; src: 'www/fonts/ArialNova-Light.ttf'}

Is there something I'm doing wrong with these approaches, or is there a different approach that I should be taking?

1 Like