3 Fonts management

The production of a ggplot graph must be done using an “R graphics device”. There are two types of “R graphics devices”: vector and bitmap devices. The ggiraph package generates SVG files, XML files containing scalable vector graphics instructions; SVG supports animations and interactivity.

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.

Font management is mandatory if you want to produce and distribute your ‘ggiraph’ graphics:

It is necessary that the font is available at the time of production on the machine which produces the graphic,
it is also necessary to make sure that this font is made available to the reader of the web page which will receive this graphic. If the font is not available in the web page hosting the interactive graphic, the text will appear badly positioned.

If you do not specify the fonts to use, default fonts will be chosen for you, some available on the machine. You can use the validated_fonts() function to see these values:

validated_fonts()

$sans
[1] "Helvetica"

$serif
[1] "PT Serif"

$mono
[1] "PT Serif"

$symbol
[1] "Symbol"

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

You can also use fonts without installing them. You need to have the ttf files. The package gdtools let use any ‘Google Fonts’. The following code:

registers “Open Sans” font so that it can then be used by ‘ggiraph’ graphic engine. (Note it should work also with ‘ragg’ and ‘svglite’);
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).

library(gdtools)
register_gfont("Open Sans")

[1] TRUE

addGFontHtmlDependency(family = "Open Sans")

register_gfont() use systemfonts::register_font() to allow the use of a font by ggiraph when creating the SVG file. systemfonts is can be used for font management. Read systemfonts documentation if you need more details.

3.1 Font usage

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

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 for each face. This is a default configuration. If you manipulate font families in ggplot, then other fonts can of course be used.

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] "PT Serif"

$mono
[1] "PT Serif"

$symbol
[1] "Symbol"

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

Or use ggplot2 usual features related to fonts, i.e. element_text(family = "Arial"), theme_minimal(base_family = "Arial"), geom_text(family = "Arial")…

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

girafe(ggobj = gg)

3.2 Example

register_gfont("Roboto")

[1] TRUE

register_gfont("Ms Madi")

[1] TRUE

Add the fonts in the R markdown HTML result as HTML dependencies.

addGFontHtmlDependency(family = c("Roboto", "Ms Madi"))

Create the graphic and use fonts…

gg <- ggplot(dat, aes(drat, carname)) + 
  geom_point() + 
  geom_text_interactive(data = dat[2:3,], 
            mapping = aes(label = carname, tooltip = carname), 
            color="red", size = 10, 
            family = "Ms Madi")+
  theme_minimal(base_family = "sans") + 
  theme(
    axis.text.x = element_text(face = "italic"),
    axis.text.y = element_text(family = "Roboto", face = "bold")
  ) 

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

3.3 Shiny illustration

Below an example of a simple shiny application that use a specific font and embed it in the application.

library(ggiraph)
library(ggplot2)
library(shiny)
library(gdtools)

register_gfont("Ms Madi")

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      addGFontHtmlDependency(family = c("Ms Madi")),
      sliderInput("num_rows", "Number of rows:",
        min = 15, max = 32, value = 20)
    ),
    mainPanel(girafeOutput("custofontplot"))
  )
)

server <- function(input, output) {
  output$custofontplot <- renderGirafe({
    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)
  })
}

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