Font space problem when deploying shiny to shinyapps.io

Question

I'm trying to create a figure for user export in my shiny app. The image is a combination of figure and text elements that I give the user the download option to download all information in one .png file. The problem is, while the text portion of the .png file looks fine when I'm testing the dashboard on my computer, the spaces are gone when deployed on shinyApps.io. I had a similar experience before and solved them with monospaced fonts but can't figure out how to fix this particular issue.

Here's a simple example:

ui <- fluidPage(
  downloadButton("ts_export", "Export Figure", 
                 class = "btn-success")
)

server <- function(input, output){
  reactive_objects = reactiveValues()
  
  output$ts_export <- downloadHandler(
    filename = function(){
      'image.png'
    },
    content = function(file){
      ggsave(file,
             plot =  reactive_objects$g_export,
             device = "png", dpi = 450, width = 13, height = 7, unit = "in")
    }
  )


  observe({
    g = ggplot(iris, aes(Sepal.Length, Petal.Width)) + geom_point()
    ts_text <- paste0(
      'This is the first line.<br>',
      '<span style="color: red;">This line is red.</span><br>',
      '<b>This line is bold.</b><br>',
      '<span style="color: blue;">This line is blue and <b>bold</b>.</span>'
    )
    reactive_objects$g_export <- 
      grid.arrange(g, 
                   gridtext::richtext_grob(text = ts_text,
                                       x = 0.05, y = 0.9, 
                                       hjust = 0, vjust = 1, 
                                       gp = gpar(fontsize = 8), 
                                       padding = unit(c(0, 0, 0, 0), "lines")
               ),
               ncol = 2,
               widths = c(8,2))
  }) 
}  
  
shinyApp(ui, server)

The output when I test the shiny app on my computer and download the image:

The text portion of the output in my shinyapps.io app: