The ggiraph package generates SVG files and for this purpose, fonts are used, in particular to determine the size and position of graphic elements. For textual representations, the name of the font used is associated with the text.

Be careful, if the font is not available on the machine where the image is displayed (the browser of one of your readers), the text will appear badly positioned.

You must therefore make sure that the font is available both on the computer that generates the SVG and on the computer used to view the SVG.

Font managmement

If you do not specify the fonts to use, default fonts will be chosen for you. They are chosen based on the ones available on the machine.

You can use the validated_fonts() function to see these values:

## $sans
## [1] "DejaVu Sans"
## 
## $serif
## [1] "DejaVu serif"
## 
## $mono
## [1] "DejaVu Sans"
## 
## $symbol
## [1] "DejaVu Sans"

In order to use a specific font, it must be available on your system. This can be checked with the font_family_exists() function.

font_family_exists("Open Sans")
## [1] TRUE

To take advantage of “Open Sans”, it must be installed on the machine.

You can also use fonts without installing them. You need to have the woff or ttf files. For example, the package gfonts will allow us to use the “Open Sans” font from “Google Fonts”.

The following code allows to download the fonts in a fonts directory.

setup_font(
  id = "open-sans", 
  output_dir = "fonts", 
  variants = c("regular", "italic", "700", "700italic"), 
  prefer_local_source = FALSE)

The following code embeds the font in the HTML document and ensures that the rendering will be possible for the reader even if he does not have the font installed on his machine. If you want to do that by hand, you will need to learn how to create a CSS “font-face”.

use_font("open-sans", "fonts/css/open-sans.css", selector = ".dummy-selector")

Now, we also need to use systemfonts::register_font() to allow the use of this font by ggiraph when creating the SVG file. systemfonts is now used for font management. Read systemfonts documentation if you need more details.

library(systemfonts)
if(!font_family_exists("Open Sans")){
  register_font(name = "Open Sans", 
    plain = list("fonts/fonts/open-sans-v18-latin-regular.woff", 0), 
    bold = list("fonts/fonts/open-sans-v18-latin-700.woff", 0), 
    italic = list("fonts/fonts/open-sans-v18-latin-italic.woff", 0),
    bolditalic = list("fonts/fonts/open-sans-v18-latin-700italic.woff", 0)
  )
}

And that’s it, “Open Sans” can be used:

font_family_exists("Open Sans")
## [1] TRUE

Font usage

To use that font in a girafe graphic, various options are available.

  • You can use the argument fonts (see ?dsvg). It’s a named list that can contains 4 font family names, one per family type: sans, serif, mono and symbol where you should map with the font family names you’d like to use.
dat <- mtcars
dat$carname <- row.names(dat)

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

validated_fonts(list(sans = "Open Sans"))
## $sans
## [1] "Open Sans"
## 
## $serif
## [1] "DejaVu serif"
## 
## $mono
## [1] "DejaVu Sans"
## 
## $symbol
## [1] "DejaVu Sans"
ggiraph(ggobj = gg, fonts = list(sans = "Open Sans"))
  • Or you can simply use ggplot2 usual features:
gg <- ggplot(dat, aes(drat, carname)) + 
  geom_point() + 
  theme_minimal(base_family = "Open Sans")

ggiraph(ggobj = gg)

Complex example

Download fonts with gfonts and register the fonts with systemfonts::register_font():

setup_font(
  id = "comic-neue", output_dir = "fonts",
  variants = c("regular", "italic", "700", "700italic"),
  prefer_local_source = FALSE
)

register_font(
  name = "Comic Neue",
  plain = list("fonts/fonts/comic-neue-v2-latin-regular.woff", 0),
  bold = list("fonts/fonts/comic-neue-v2-latin-700.woff", 0),
  italic = list("fonts/fonts/comic-neue-v2-latin-italic.woff", 0),
  bolditalic = list("fonts/fonts/comic-neue-v2-latin-700italic.woff", 0)
)

setup_font(
  id = "roboto", output_dir = "fonts",
  variants = c("regular", "italic", "700", "700italic"),
  prefer_local_source = FALSE
)

register_font(
  name = "Roboto",
  plain = list("fonts/fonts/roboto-v27-latin-regular.woff", 0),
  bold = list("fonts/fonts/roboto-v27-latin-700.woff", 0),
  italic = list("fonts/fonts/roboto-v27-latin-italic.woff", 0),
  bolditalic = list("fonts/fonts/roboto-v27-latin-700italic.woff", 0)
)

Add the fonts in the R markdown HTML result.

use_font("comic-neue", "fonts/css/comic-neue.css", selector = ".dummy-selector")

use_font("roboto", "fonts/css/roboto.css", selector = ".dummy-selector")

Create the graphic and use fonts:

gg <- ggplot(dat, aes(drat, carname)) + 
  geom_point() + 
  geom_text(data = dat[1:3,], aes(label = carname), color="orange", family = "Comic Neue")+
  theme_minimal(base_family = "sans") + 
  theme(axis.title = element_text(family = "Roboto", face = "bold"),
        axis.text.x = element_text(face = "italic"),
        axis.text.y = element_text(face = "bold")
        ) 

ggiraph(ggobj = gg, fonts = list(sans = "Open Sans"))