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:

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] "STIX Two Text"

$mono
[1] "STIX Two Text"

$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:

library(gdtools)
register_gfont("Open Sans")
[1] TRUE
addGFontHtmlDependency(family = "Open Sans")

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

3.0.1 Offline alternative with Liberation Sans

If you don’t have internet access or prefer not to depend on Google Fonts, gdtools bundles the “Liberation Sans” font family. It can be registered and embedded without any download:

library(gdtools)
register_liberationsans()

girafe(
  ggobj = gg,
  dependencies = list(gdtools::liberationsansHtmlDependency())
)

register_liberationsans() makes the font available to the graphic engine, and liberationsansHtmlDependency() embeds it in the HTML output for the reader’s browser.

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] "STIX Two Text"

$mono
[1] "STIX Two Text"

$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 2 fonts with register_gfont():

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 Font validation

girafe() provides two arguments to help detect font issues early:

  • check_fonts_registered = TRUE: checks that all font families used in the ggplot (theme and geom layers) are registered with systemfonts. If a font is missing, an error is raised with instructions on how to register it.
  • check_fonts_dependencies = TRUE: checks that all font families used in the ggplot are found in the HTML dependencies provided via the dependencies argument. If a font is missing, a warning is raised — the graphic will render but the reader’s browser may not have the font available.
girafe(
  ggobj = gg,
  check_fonts_registered = TRUE,
  check_fonts_dependencies = TRUE,
  dependencies = list(gdtools::gfontHtmlDependency(family = "Open Sans"))
)

These checks are disabled by default to avoid slowing down rendering, but they are useful during development or when deploying to a server where font availability may differ from your local machine.

3.4 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)