As I am no native engish speaker, I appologize for my english.
I am building an Dashboard using the flexdashboard-package and highcharter to create nice graphs. Further, want to use a custom font: myfont.otf. When I run my code on my decive everything looks fine. But when I deploy it to shinyapps and open the page in Firefox, the font is not displayed correctly in my highcharts graphics. Strangely, when I use chrome to open the Page everything looks as desired. It is crutial to me that my dashboard looks the same regardeless which browser is used. Any help is appreciated.

Here is a minimal example of my code:

YAML:

title: "Test"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill
    css: style.css
runtime: shiny

packages:

library(flexdashboard)
library(highcharter)
library(dplyr)
library(showtext)
library(sysfonts)

loading font and create graph:

# load font
font_add("myfont", 
         regular = "myfont.otf")

# define theme 
my_theme <- hc_theme(
  chart = list(style = list(fontFamily = "myfont"))
  )

# create graph
iris %>% 
  count(Species) %>%
  mutate(rel = round(n/sum(n)*100, 1)) %>%
  
  hchart(type = "bar", hcaes(x = Species, y = rel)) %>%
  hc_plotOptions(bar = list(
    dataLabels = list(enabled = T,
                      format = '{y} %'))) %>%
  hc_add_theme(my_theme)

style.css:

@font-face {
    font-family: 'myfont';
    src: url("myfont.otf") format("opentype");
}

body, .highcharts-container {
  font-family: 'myfont', Sans-Serif;
}

I’ve googled the problem for quiete some time and asked ChatGPT for help and it told me to check the console in firefox, which gave me this error:

Refused to apply style from ‘https://fonts.googleapis.com/css?family=myfont’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Does anyone know how to solve this problem? Thanks a lot in advance.