xaringanthemer/man/fragments/_fonts.Rmd

<!-- Need to set [adding-custom-css] -->

[google-fonts]: https://fonts.google.com

<link href="https://fonts.googleapis.com/css2?family=Cabin:wght@600&family=Noto+Sans&display=swap" rel="stylesheet">

```{css echo=FALSE}
.cabin {
  font-family: Cabin;
  font-weight: 600
}
.noto-sans {
  font-family: 'Noto Sans';
}
.font-preview {
  padding: 1em;
  margin-top: 1em;
  margin-bottom: 1em;
  border: 1px solid #dddddd;
  border-radius: 3px;
  font-size: 1.25em;
}
```

### Default Fonts

The default heading and body fonts used in **xaringanthemer**
are different than the xaringan default fonts.
In xaringanthemer,
[Cabin](https://fonts.google.com/specimen/Cabin)
is used for headings and 
[Noto Sans](https://fonts.google.com/specimen/Noto+Sans)
for body text.

<div class="font-preview">
<p style="font-size: 1.5em" class="cabin">A Cabin in the Clearing</p>
<p class="noto-sans">Pack my box with five dozen liquor jugs. Amazingly few discotheques provide jukeboxes.</p>
</div>


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](https://slides.yihui.name/xaringan/), 
you can use the following arguments in your style function.

```{r eval=FALSE, echo=TRUE}
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][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][google-fonts], 
set the `<type>_font_google` theme arguments --
```{r results='asis', echo=FALSE}
cat(paste0("`", tvv[grepl("_font_google$", tvv)], "`", collapse = ", "))
```
--- using the `google_font()` helper.
The help documentation in `?google_font` provides more info.

```{r eval=FALSE, echo=TRUE}
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](https://github.com/tonsky/FiraCode),
which would be declared with `code_font_family`.
The
[browser usage](https://github.com/tonsky/FiraCode#browser-support)
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.

```{r eval=FALSE, echo=TRUE}
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][adding-custom-css], 
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`.

```{r eval=FALSE, echo=TRUE}
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")
  )
)
```