convert ggplot object into svg which use Open Sans Semibold font

Question

I would like to create a ggplot plot which use Open Sans Semibold font and then I want to convert this plot into svg. Finally include this in rmarkdown doc. the biggest problem is to use Open Sans Semibold on the converted ggplot object on the browser.

1. I used svglite to convert ggplot into svg and it works well.
2. I included Open Sans Semibold font in titles of axis (I stored all Open Sans family locally).

3. I created rmarkdown doc.

   ---
   title: ""
   output: html_document
   ---
   
   ```{r setup, include = FALSE}
   library(svglite)
   knitr::opts_chunk$set(
     dev = "svglite",
     fig.ext = ".svg"
   )
   ```
   
   ```{r, warning = F, message = F, echo = F}
   library(ggplot2)
   
   data(cars)
   
   ggplot(mtcars, aes(mpg, qsec, color = factor(cyl))) +
      geom_point() +
      theme(text = element_text(family = 'Open Sans'),
           axis.title = element_text(family = 'Open Sans Semibold'))
   
   ```
   

When I open this doc in the Chrome/Opera/Mozilla browser, the Open Sans Semibold does not show up. Instead Arial replaces it. However in Safari it works perfectly. It turned out (more info here) that there is a typical problem on those browsers with Open Sans Semibold and Light. In order to solve it rather than using semibold version, I use css font-weight with basic 'Open Sans', sans-serif. And it works perfectly when I create a <p>.

---
title: ""
output: html_document
---

<style> 
      @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);

      .text_basic {
            font-family: 'Open Sans', sans-serif;
      }

      .text_semibold {
            font-family: 'Open Sans', sans-serif;
            font-weight: 700;
      }
</style>

<p class = 'text_basic'> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, nisi quasi cupiditate, ratione, consequuntur adipisci reiciendis impedit, laborum tenetur qui neque nobis enim. Sunt 
</p>

<p class = 'text_semibold'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, nisi quasi cupiditate, ratione, consequuntur adipisci reiciendis impedit, laborum tenetur qui neque nobis enim. Sunt 
</p>

```{r setup, include = FALSE}
library(svglite)
knitr::opts_chunk$set(
      dev = "svglite",
      fig.ext = ".svg"
)
```

```{r, warning = F, message = F, echo = F}
library(ggplot2)

data(cars)

ggplot(mtcars, aes(mpg, qsec, color = factor(cyl))) +
      geom_point() +
      theme(text = element_text(family = 'Open Sans'),
            axis.title = element_text(family = 'Open Sans Semibold'))

```

However this solution does not work on ggplot object, because it still use Open Sans Semibold font. In ggplot it is not possible to use font-weight because there is no such thing. Instead you can only use face argument but that option does not accept numeric values.

One workaround which I initially believe could work is to convert ggplot object into html code and then use css to manipulate the fonts on axis.

---
title: ""
output: html_document
---

```{r setup, include = FALSE}
library(svglite)
knitr::opts_chunk$set(
      dev = "svglite",
      fig.ext = ".svg"
)
```

```{r, warning = F, message = F, echo = F}
library(ggplot2)

data(cars)

s <- svgstring()

ggplot(mtcars, aes(mpg, qsec, color = factor(cyl))) +
      geom_point() +
      theme(text = element_text(family = 'Open Sans'),
            axis.title = element_text(family = 'Open Sans Semibold'))

htmltools::HTML(s())
invisible(
      dev.off()
)

```

In that case it is possible to detect text tags and manipulate them as I want to, but generated code is flat i.e. it is not easy to differatiate text tags related to the labels and to the titles.

So, anyone has idea to solve this problem?

Thanks anyone who read this last sentence. I tried to summarize my problem as short as possible.

Answer 1

Both your ideas for a workaround seem straight forward approaches, and to make them work with the plot, you can use gsub to directly modify the HTML and set the font-weight of the style attribute of the text:

s <- svgstring()

ggplot(mtcars, aes(mpg, qsec, color = factor(cyl))) +
      geom_point() +
      theme(text = element_text(family = 'Open Sans'),
            axis.title = element_text(family = 'Open Sans Semibold'))

gsub("font-family: Open Sans Semibold;", 
     "font-family: Open Sans;font-weight: 700;", 
     htmltools::HTML(s()))