Axes font changed after deployed to shinyapps.io

[chuyachia]

When run locally, the font of the plot axes is Arial as it is in ggplot2 by default. However, when deployed to shinyapps.io, the font becomes a serif font, Tex gyre heros.

I was able to get around this problem by specifying font family in css in shiny app but still wonders why this happens.

Reproduction codes:

##server.r
library(ggplot2)
library(ggiraph)
server <- function(input, output,session) {
  data(mtcars)
  output$demo <- renderggiraph({
  p <- ggplot(mtcars, aes(wt, mpg))+
    geom_point_interactive(aes(tooltip = rownames(mtcars)),size=4)+
    theme(text = element_text(size=20))
  ggiraph(code = print(p),selection_type="single")
  })
}

## ui.r
library(shiny)
library(ggiraph)

ui <- fluidPage(
  ## Specifying the font in css to get around the problem
  #tags$head(
  #  tags$style(type="text/css", "text {font-family: sans-serif}")
  #),
  titlePanel("Ggiraph test"),
  ggiraphOutput("demo")
)

[davidgohel]

Thanks, sorry for the delay.

I still not had a look at this issue as it seems complex :) I will take time later for that but yes, seems very strange to me...

[gilliganondata]

Any update on this? I just stumbled across the same issue. @chuyachia If you're willing to drop an example of how to tweaked a .css file to override, that would be great (as I dive into doing the same).

Below is what I did, and that seemed to do the trick as a workaround:

text {
     font-family: helvetica,arial,sans-serf;
}

[chuyachia]

@gilliganondata I did not use an external .css file for this. Just used tags$head( tags$style(type="text/css", "text {font-family: sans-serif}")) to specify the font.

[gilliganondata]

Thanks! I already had an external .css for some other styling, so it was easy enough to add it there. Thanks for adding the inline syntax!

[JoachimGoedhart]

Thanks @chuyachia, I had the same issue (when deploying an app on shinyapps.io) and the inline css code fixed it.

[pepijn-devries]

Is there any news/progress on this issue? I ran into the same problem with ggiraph 0.8.2 after deploying it to our RStudio Connect v1.8.8.2 shiny server. Not only did the font appeared differently on the deployed app, the alignment of the axes tick labels was jagged when vjust and hjust is specified. This problem also appeared after deploying the app. On my local machine it runs just fine.

[davidgohel]

yes, sorry, the issue should have closed a long time ago.

This is explained here: https://davidgohel.github.io/ggiraph/articles/offcran/fonts.html

[davidgohel]

so you need to add fonts in your app and specify them with systemfonts::register_font()

[pepijn-devries]

Hi @davidgohel, thanks for the quick response and posting the solution to this issue. I will give it a try.

[pepijn-devries]

Using the steps mentioned here: https://davidgohel.github.io/ggiraph/articles/offcran/fonts.html I managed to resolve the issue. However, there are some sidenotes:

• When used in a shiny app, the 'use_font' statement needs to be embedded inside the ui (this was not immediately clear from the above mentioned page).
• Also, it seems that the entire shiny page is now rendered in the specified font, not just the ggiraph object. Is there a way to only target the ggiraph object?
• When using the download button, to download the plot as 'png', the font problems persist.

[davidgohel]

I can reproduce for the download button. Not for the other points.

This works on my machine. Don't use gfonts if you don't want, just make sure you have the font available in the Web page and available when ggiraph is processing the graphic.

library(systemfonts)
library(ggiraph)
library(ggplot2)
library(shiny)


if (!dir.exists("www")) {
  dir.create("www")
  library(gfonts)
  setup_font(
    id = "ms-madi",
    output_dir = "www",
    variants = "regular",
    prefer_local_source = FALSE)
}

if(!font_family_exists("Ms Madi")){
  register_font(name = "Ms Madi",
                plain = list("www/fonts/ms-madi-v2-latin-regular.woff", 0)
  )
}

# Define UI for application that draws a histogram
ui <- fluidPage(

    # Sidebar with a slider input for number of bins
    sidebarLayout(
        sidebarPanel(
            sliderInput("num_rows",
                        "Number of rows:",
                        min = 15,
                        max = 32,
                        value = 20),
            verbatimTextOutput("verbat")
        ),

        # Show a plot of the generated distribution
        mainPanel(
          tags$link(
            rel = "stylesheet",
            href="css/ms-madi.css"
          ),
          girafeOutput("custofontplot")
        )
    )
)

# Define server logic required to draw a histogram
server <- function(input, output) {

    output$custofontplot <- renderGirafe({
        # generate bins based on input$bins from ui.R
      dat <- mtcars[seq_len(input$num_rows),]
      dat$carname <- row.names(dat)

      gg <- ggplot(dat, aes(drat, carname)) +
        geom_point() +
        theme_minimal(base_family = "Ms Madi")

      girafe(ggobj = gg)
    })

    output$verbat <- renderPrint({
      fs::dir_tree(".")
    })
}

# Run the application
shinyApp(ui = ui, server = server)

[pepijn-devries]

Hi, Thanks again! Maybe the example above can be added to the documentation? For me it fixed the first two issues (where 'use_font' affected the entire page, not just the plot).

Is there an easy fix or workaround for the png download? Is it possible to let the user download the svg as a stand-alone file?

By the way, nice work on the package! I was looking for a way to make ggplots interactive for a long time!

[davidgohel]

added the example in the doc.

For the download button, I will open a new issue

[pepijn-devries]

added the example in the doc.

For the download button, I will open a new issue

Thanks!