Skip to contents

Fonts

Source: vignettes/fonts.Rmd
fonts.Rmd

Default Fonts

The default heading and body fonts used in xaringanthemer are different than the xaringan default fonts. In xaringanthemer, Cabin is used for headings and Noto Sans for body text.

A Cabin in the Clearing

Pack my box with five dozen liquor jugs. Amazingly few discotheques provide jukeboxes.

These fonts are easier to read on screens and at a distance during presentations, and they support a wide variety of languages and weights. Another reason for the change is that the xaringan (remarkjs) default body font, Droid Serif, is no longer officially included in Google Fonts.

If you would like to use the fonts from the default xaringan theme, you can use the following arguments in your style function.

style_xaringan(
  text_font_family = "Droid Serif",
  text_font_url = "https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic",
  header_font_google = google_font("Yanone Kaffeesatz")
)

Custom and Google Font Fonts

xaringanthemer makes it easy to use Google Fonts in your presentations (provided you have an internet connection during the presentation) or to fully specify your font files.

To use Google Fonts, set the <type>_font_google theme arguments – text_font_google, header_font_google, code_font_google — using the google_font() helper. The help documentation in ?google_font provides more info.

style_mono_light(
  header_font_google = google_font("Josefin Slab", "600"),
  text_font_google   = google_font("Work Sans", "300", "300i"),
  code_font_google   = google_font("IBM Plex Mono")
)

If you set an <type>_font_google theme arguments, then <type>_font_family, <type>_font_weight and <type>_font_url are overwritten – where <type> is one of header, text, or code.

To use a font hosted outside of Google fonts, you need to provide both <type>_font_family and <type>_font_url. For example, suppose you want to use a code font with ligatures for your code chunks, such as Fira Code, which would be declared with code_font_family. The browser usage section of the Fira Code README provides a CSS URL to be used with an @import statement that you can use with the code_font_url argument.

style_solarized_dark(
  code_font_family = "Fira Code",
  code_font_url = "https://cdn.jsdelivr.net/gh/tonsky/FiraCode@2/distr/fira_code.css"
)

Remember that you need to supply either <type>_google_font using the google_font() helper or both <type>_font_family and <type>_font_url.

Using Additional Fonts

If you want to use additional fonts for use in custom CSS definitions, use the extra_fonts argument to pass a list of URLs or google_font()s. Notice that you will need to add custom CSS (for example, via extra_css) to use the fonts imported in extra_fonts.

style_mono_light(
  extra_fonts = list(
    google_font("Sofia"),
    # Young Serif by uplaod.fr
    "https://cdn.jsdelivr.net/gh/uplaod/YoungSerif/fonts/webfonts/fontface.css",
  ),
  extra_css = list(
    ".title-slide h2" = list("font-family" = "Sofia"),
    blockquote = list("font-family" = "youngserifregular")
  )
)