I have the open source Shiny-server running on a Digital Ocean droplet. I wish to use a font, Goldman Sans, that I have downloaded. Following these instructions here is what I have:
/srv/shiny-server contains app.R and a www folder.
app.R is:
library(reactable)
library(tidyverse)
library(shiny)
ui <- fluidPage(reactableOutput("table"),
tags$head(
includeCSS("www/styles.css")
))
server <- function(input, output, session) {
output$table <- renderReactable({
reactable(iris,
defaultColDef = colDef(
style = list(fontFamily = "Goldman Sans"),
headerStyle = list(fontFamily = "Goldman Sans"))
)
})
}
shinyApp(ui, server)
The beginning of styles.css contains
@font-face {
font-family: 'Goldman Sans', sans-serif;
src: url('GoldmanSans_Rg.ttf') format('truetype');
}
@font-face {
font-family: 'Goldman Sans', sans-serif;
src: url('GoldmanSans_Bd.ttf') format('truetype');
font-weight: 700;
}
These files, GoldmanSans_Rg.ttf and GoldmanSans_Bd.ttf, are located in the same directory (www) as styles.css
In Safari, if I right-click on Inspect Element I see under Styles:
Style Attribute {
font-family: "Goldman-Sans";
I also see a red stop sign error(!)
Failed to load resource: the server responded with a status of 404 (Not Found) https://example.com/core-js-2.5.3/shim.min.js.map
Though I am not sure that this is related to the font issue.
I have also tried
ui <- fluidPage(theme = "styles.css"...
to no avail.
How can I get custom fonts to work when the Shiny app is live?