Can't get local custom font to work with Shiny App on Ubuntu

Viewed 189

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?

0 Answers
Related