feat: Add header_font_family_fallback

Fixes #41

NEWS.md

@@ -4,6 +4,8 @@
 
 - .pull-right[] now clears floats just for its immediate sibling
 
+- Add `header_font_family_fallback` to control fallback fonts for headings (thanks @mattwarkentin, #41)
+
 # xaringanthemer 0.3.0
 
 * Adds `theme_xaringan()`, a ggplot2 theme that automatically uses the colors

R/style_duo.R

@@ -236,6 +236,11 @@
 #'   `h1, h2, h3` elements. Accepts CSS
 #'   [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
 #'   property values.
+#' @param header_font_family_fallback Header Font Family Fallback. Defaults to
+#'   Georgia, serif. Modifies the `h1, h2, h3` elements. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(--header-font-family-fallback)` in any argument of a style function
+#'   or in custom CSS.
 #' @param header_font_url Header Font URL. Defaults to
 #'   `xaringanthemer_font_default("header_font_url")`. Modifies the
 #'   `@import url` elements.
@@ -321,6 +326,7 @@ style_duo <- function(
   header_font_google = NULL,
   header_font_family = xaringanthemer_font_default("header_font_family"),
   header_font_weight = xaringanthemer_font_default("header_font_weight"),
+  header_font_family_fallback = "Georgia, serif",
   header_font_url = xaringanthemer_font_default("header_font_url"),
   code_font_google = NULL,
   code_font_family = xaringanthemer_font_default("code_font_family"),

R/style_duo_accent.R

@@ -248,6 +248,11 @@
 #'   `h1, h2, h3` elements. Accepts CSS
 #'   [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
 #'   property values.
+#' @param header_font_family_fallback Header Font Family Fallback. Defaults to
+#'   Georgia, serif. Modifies the `h1, h2, h3` elements. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(--header-font-family-fallback)` in any argument of a style function
+#'   or in custom CSS.
 #' @param header_font_url Header Font URL. Defaults to
 #'   `xaringanthemer_font_default("header_font_url")`. Modifies the
 #'   `@import url` elements.
@@ -335,6 +340,7 @@ style_duo_accent <- function(
   header_font_google = NULL,
   header_font_family = xaringanthemer_font_default("header_font_family"),
   header_font_weight = xaringanthemer_font_default("header_font_weight"),
+  header_font_family_fallback = "Georgia, serif",
   header_font_url = xaringanthemer_font_default("header_font_url"),
   code_font_google = NULL,
   code_font_family = xaringanthemer_font_default("code_font_family"),

R/style_duo_accent_inverse.R

@@ -249,6 +249,11 @@
 #'   `h1, h2, h3` elements. Accepts CSS
 #'   [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
 #'   property values.
+#' @param header_font_family_fallback Header Font Family Fallback. Defaults to
+#'   Georgia, serif. Modifies the `h1, h2, h3` elements. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(--header-font-family-fallback)` in any argument of a style function
+#'   or in custom CSS.
 #' @param header_font_url Header Font URL. Defaults to
 #'   `xaringanthemer_font_default("header_font_url")`. Modifies the
 #'   `@import url` elements.
@@ -336,6 +341,7 @@ style_duo_accent_inverse <- function(
   header_font_google = NULL,
   header_font_family = xaringanthemer_font_default("header_font_family"),
   header_font_weight = xaringanthemer_font_default("header_font_weight"),
+  header_font_family_fallback = "Georgia, serif",
   header_font_url = xaringanthemer_font_default("header_font_url"),
   code_font_google = NULL,
   code_font_family = xaringanthemer_font_default("code_font_family"),

R/style_mono_accent.R

@@ -239,6 +239,11 @@
 #'   `h1, h2, h3` elements. Accepts CSS
 #'   [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
 #'   property values.
+#' @param header_font_family_fallback Header Font Family Fallback. Defaults to
+#'   Georgia, serif. Modifies the `h1, h2, h3` elements. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(--header-font-family-fallback)` in any argument of a style function
+#'   or in custom CSS.
 #' @param header_font_url Header Font URL. Defaults to
 #'   `xaringanthemer_font_default("header_font_url")`. Modifies the
 #'   `@import url` elements.
@@ -325,6 +330,7 @@ style_mono_accent <- function(
   header_font_google = NULL,
   header_font_family = xaringanthemer_font_default("header_font_family"),
   header_font_weight = xaringanthemer_font_default("header_font_weight"),
+  header_font_family_fallback = "Georgia, serif",
   header_font_url = xaringanthemer_font_default("header_font_url"),
   code_font_google = NULL,
   code_font_family = xaringanthemer_font_default("code_font_family"),

R/style_mono_accent_inverse.R

@@ -240,6 +240,11 @@
 #'   `h1, h2, h3` elements. Accepts CSS
 #'   [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
 #'   property values.
+#' @param header_font_family_fallback Header Font Family Fallback. Defaults to
+#'   Georgia, serif. Modifies the `h1, h2, h3` elements. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(--header-font-family-fallback)` in any argument of a style function
+#'   or in custom CSS.
 #' @param header_font_url Header Font URL. Defaults to
 #'   `xaringanthemer_font_default("header_font_url")`. Modifies the
 #'   `@import url` elements.
@@ -326,6 +331,7 @@ style_mono_accent_inverse <- function(
   header_font_google = NULL,
   header_font_family = xaringanthemer_font_default("header_font_family"),
   header_font_weight = xaringanthemer_font_default("header_font_weight"),
+  header_font_family_fallback = "Georgia, serif",
   header_font_url = xaringanthemer_font_default("header_font_url"),
   code_font_google = NULL,
   code_font_family = xaringanthemer_font_default("code_font_family"),

R/style_mono_dark.R

@@ -241,6 +241,11 @@
 #'   `h1, h2, h3` elements. Accepts CSS
 #'   [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
 #'   property values.
+#' @param header_font_family_fallback Header Font Family Fallback. Defaults to
+#'   Georgia, serif. Modifies the `h1, h2, h3` elements. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(--header-font-family-fallback)` in any argument of a style function
+#'   or in custom CSS.
 #' @param header_font_url Header Font URL. Defaults to
 #'   `xaringanthemer_font_default("header_font_url")`. Modifies the
 #'   `@import url` elements.
@@ -327,6 +332,7 @@ style_mono_dark <- function(
   header_font_google = NULL,
   header_font_family = xaringanthemer_font_default("header_font_family"),
   header_font_weight = xaringanthemer_font_default("header_font_weight"),
+  header_font_family_fallback = "Georgia, serif",
   header_font_url = xaringanthemer_font_default("header_font_url"),
   code_font_google = NULL,
   code_font_family = xaringanthemer_font_default("code_font_family"),

R/style_mono_light.R

@@ -241,6 +241,11 @@
 #'   `h1, h2, h3` elements. Accepts CSS
 #'   [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
 #'   property values.
+#' @param header_font_family_fallback Header Font Family Fallback. Defaults to
+#'   Georgia, serif. Modifies the `h1, h2, h3` elements. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(--header-font-family-fallback)` in any argument of a style function
+#'   or in custom CSS.
 #' @param header_font_url Header Font URL. Defaults to
 #'   `xaringanthemer_font_default("header_font_url")`. Modifies the
 #'   `@import url` elements.
@@ -327,6 +332,7 @@ style_mono_light <- function(
   header_font_google = NULL,
   header_font_family = xaringanthemer_font_default("header_font_family"),
   header_font_weight = xaringanthemer_font_default("header_font_weight"),
+  header_font_family_fallback = "Georgia, serif",
   header_font_url = xaringanthemer_font_default("header_font_url"),
   code_font_google = NULL,
   code_font_family = xaringanthemer_font_default("code_font_family"),

R/style_solarized_dark.R

@@ -226,6 +226,11 @@
 #'   `h1, h2, h3` elements. Accepts CSS
 #'   [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
 #'   property values.
+#' @param header_font_family_fallback Header Font Family Fallback. Defaults to
+#'   Georgia, serif. Modifies the `h1, h2, h3` elements. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(--header-font-family-fallback)` in any argument of a style function
+#'   or in custom CSS.
 #' @param header_font_url Header Font URL. Defaults to
 #'   `xaringanthemer_font_default("header_font_url")`. Modifies the
 #'   `@import url` elements.
@@ -309,6 +314,7 @@ style_solarized_dark <- function(
   header_font_google = NULL,
   header_font_family = xaringanthemer_font_default("header_font_family"),
   header_font_weight = xaringanthemer_font_default("header_font_weight"),
+  header_font_family_fallback = "Georgia, serif",
   header_font_url = xaringanthemer_font_default("header_font_url"),
   code_font_google = NULL,
   code_font_family = xaringanthemer_font_default("code_font_family"),

R/style_solarized_light.R

@@ -226,6 +226,11 @@
 #'   `h1, h2, h3` elements. Accepts CSS
 #'   [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
 #'   property values.
+#' @param header_font_family_fallback Header Font Family Fallback. Defaults to
+#'   Georgia, serif. Modifies the `h1, h2, h3` elements. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(--header-font-family-fallback)` in any argument of a style function
+#'   or in custom CSS.
 #' @param header_font_url Header Font URL. Defaults to
 #'   `xaringanthemer_font_default("header_font_url")`. Modifies the
 #'   `@import url` elements.
@@ -309,6 +314,7 @@ style_solarized_light <- function(
   header_font_google = NULL,
   header_font_family = xaringanthemer_font_default("header_font_family"),
   header_font_weight = xaringanthemer_font_default("header_font_weight"),
+  header_font_family_fallback = "Georgia, serif",
   header_font_url = xaringanthemer_font_default("header_font_url"),
   code_font_google = NULL,
   code_font_family = xaringanthemer_font_default("code_font_family"),

R/style_xaringan.R

@@ -226,6 +226,11 @@
 #'   `h1, h2, h3` elements. Accepts CSS
 #'   [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
 #'   property values.
+#' @param header_font_family_fallback Header Font Family Fallback. Defaults to
+#'   Georgia, serif. Modifies the `h1, h2, h3` elements. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(--header-font-family-fallback)` in any argument of a style function
+#'   or in custom CSS.
 #' @param header_font_url Header Font URL. Defaults to
 #'   `xaringanthemer_font_default("header_font_url")`. Modifies the
 #'   `@import url` elements.
@@ -308,6 +313,7 @@ style_xaringan <- function(
   header_font_google = NULL,
   header_font_family = xaringanthemer_font_default("header_font_family"),
   header_font_weight = xaringanthemer_font_default("header_font_weight"),
+  header_font_family_fallback = "Georgia, serif",
   header_font_url = xaringanthemer_font_default("header_font_url"),
   code_font_google = NULL,
   code_font_family = xaringanthemer_font_default("code_font_family"),

data-raw/theme_template_variables.R

@@ -55,6 +55,7 @@ template_variables <- tibble::tribble(
   , "header_font_google", "{NULL}", "body", "Use `google_font()` to specify header font", NA_character_
   , "header_font_family", '{xaringanthemer_font_default("header_font_family")}', "h1, h2, h3", "Header Font Family (xaringan default is `'Yanone Kaffeesatz'`)", "--header-font-family"
   , "header_font_weight", '{xaringanthemer_font_default("header_font_weight")}', "h1, h2, h3", "Header Font Weight", NA_character_
+  , "header_font_family_fallback", 'Georgia, serif', "h1, h2, h3", "Header Font Family Fallback", "--header-font-family-fallback"
   , "header_font_url", '{xaringanthemer_font_default("header_font_url")}', "@import url", "Header Font URL", NA_character_
   , "code_font_google", "{NULL}", "body", "Use `google_font()` to specify code font", NA_character_
   , "code_font_family", '{xaringanthemer_font_default("code_font_family")}', ".remark-code, .remark-inline-code", "Code Font Family", "--code-font-family"

inst/resources/template.css

@@ -31,6 +31,7 @@
   --text-font-base: {{text_font_base}};
   --header-font-family: {{header_font_family}};
   --header-font-is-google: {{header_font_is_google}};
+  --header-font-family-fallback: {{header_font_family_fallback}};
   --code-font-family: {{code_font_family}};
   --code-font-is-google: {{code_font_is_google}};
   --base-font-size: {{base_font_size}};
@@ -69,7 +70,7 @@ body {
   color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: var(--header-font-family);
+  font-family: var(--header-font-family), var(--header-font-family-fallback);
   font-weight: {{header_font_weight}};
   color: var(--header-color);
 }

man/style_duo.Rd

@@ -63,6 +63,7 @@ style_duo(
   header_font_google = NULL,
   header_font_family = xaringanthemer_font_default("header_font_family"),
   header_font_weight = xaringanthemer_font_default("header_font_weight"),
+  header_font_family_fallback = "Georgia, serif",
   header_font_url = xaringanthemer_font_default("header_font_url"),
   code_font_google = NULL,
   code_font_family = xaringanthemer_font_default("code_font_family"),
@@ -368,6 +369,12 @@ argument of a style function or in custom CSS.}
 \href{https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight}{font-weight}
 property values.}
 
+\item{header_font_family_fallback}{Header Font Family Fallback. Defaults to
+Georgia, serif. Modifies the \verb{h1, h2, h3} elements. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(--header-font-family-fallback)} in any argument of a style function
+or in custom CSS.}
+
 \item{header_font_url}{Header Font URL. Defaults to
 \code{xaringanthemer_font_default("header_font_url")}. Modifies the
 \verb{@import url} elements.}

man/style_duo_accent.Rd

@@ -68,6 +68,7 @@ style_duo_accent(
   header_font_google = NULL,
   header_font_family = xaringanthemer_font_default("header_font_family"),
   header_font_weight = xaringanthemer_font_default("header_font_weight"),
+  header_font_family_fallback = "Georgia, serif",
   header_font_url = xaringanthemer_font_default("header_font_url"),
   code_font_google = NULL,
   code_font_family = xaringanthemer_font_default("code_font_family"),
@@ -387,6 +388,12 @@ argument of a style function or in custom CSS.}
 \href{https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight}{font-weight}
 property values.}
 
+\item{header_font_family_fallback}{Header Font Family Fallback. Defaults to
+Georgia, serif. Modifies the \verb{h1, h2, h3} elements. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(--header-font-family-fallback)} in any argument of a style function
+or in custom CSS.}
+
 \item{header_font_url}{Header Font URL. Defaults to
 \code{xaringanthemer_font_default("header_font_url")}. Modifies the
 \verb{@import url} elements.}

man/style_duo_accent_inverse.Rd

@@ -69,6 +69,7 @@ style_duo_accent_inverse(
   header_font_google = NULL,
   header_font_family = xaringanthemer_font_default("header_font_family"),
   header_font_weight = xaringanthemer_font_default("header_font_weight"),
+  header_font_family_fallback = "Georgia, serif",
   header_font_url = xaringanthemer_font_default("header_font_url"),
   code_font_google = NULL,
   code_font_family = xaringanthemer_font_default("code_font_family"),
@@ -389,6 +390,12 @@ argument of a style function or in custom CSS.}
 \href{https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight}{font-weight}
 property values.}
 
+\item{header_font_family_fallback}{Header Font Family Fallback. Defaults to
+Georgia, serif. Modifies the \verb{h1, h2, h3} elements. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(--header-font-family-fallback)} in any argument of a style function
+or in custom CSS.}
+
 \item{header_font_url}{Header Font URL. Defaults to
 \code{xaringanthemer_font_default("header_font_url")}. Modifies the
 \verb{@import url} elements.}

man/style_mono_accent.Rd

@@ -63,6 +63,7 @@ style_mono_accent(
   header_font_google = NULL,
   header_font_family = xaringanthemer_font_default("header_font_family"),
   header_font_weight = xaringanthemer_font_default("header_font_weight"),
+  header_font_family_fallback = "Georgia, serif",
   header_font_url = xaringanthemer_font_default("header_font_url"),
   code_font_google = NULL,
   code_font_family = xaringanthemer_font_default("code_font_family"),
@@ -372,6 +373,12 @@ argument of a style function or in custom CSS.}
 \href{https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight}{font-weight}
 property values.}
 
+\item{header_font_family_fallback}{Header Font Family Fallback. Defaults to
+Georgia, serif. Modifies the \verb{h1, h2, h3} elements. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(--header-font-family-fallback)} in any argument of a style function
+or in custom CSS.}
+
 \item{header_font_url}{Header Font URL. Defaults to
 \code{xaringanthemer_font_default("header_font_url")}. Modifies the
 \verb{@import url} elements.}

man/style_mono_accent_inverse.Rd

@@ -63,6 +63,7 @@ style_mono_accent_inverse(
   header_font_google = NULL,
   header_font_family = xaringanthemer_font_default("header_font_family"),
   header_font_weight = xaringanthemer_font_default("header_font_weight"),
+  header_font_family_fallback = "Georgia, serif",
   header_font_url = xaringanthemer_font_default("header_font_url"),
   code_font_google = NULL,
   code_font_family = xaringanthemer_font_default("code_font_family"),
@@ -373,6 +374,12 @@ argument of a style function or in custom CSS.}
 \href{https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight}{font-weight}
 property values.}
 
+\item{header_font_family_fallback}{Header Font Family Fallback. Defaults to
+Georgia, serif. Modifies the \verb{h1, h2, h3} elements. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(--header-font-family-fallback)} in any argument of a style function
+or in custom CSS.}
+
 \item{header_font_url}{Header Font URL. Defaults to
 \code{xaringanthemer_font_default("header_font_url")}. Modifies the
 \verb{@import url} elements.}

man/style_mono_dark.Rd

@@ -63,6 +63,7 @@ style_mono_dark(
   header_font_google = NULL,
   header_font_family = xaringanthemer_font_default("header_font_family"),
   header_font_weight = xaringanthemer_font_default("header_font_weight"),
+  header_font_family_fallback = "Georgia, serif",
   header_font_url = xaringanthemer_font_default("header_font_url"),
   code_font_google = NULL,
   code_font_family = xaringanthemer_font_default("code_font_family"),
@@ -374,6 +375,12 @@ argument of a style function or in custom CSS.}
 \href{https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight}{font-weight}
 property values.}
 
+\item{header_font_family_fallback}{Header Font Family Fallback. Defaults to
+Georgia, serif. Modifies the \verb{h1, h2, h3} elements. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(--header-font-family-fallback)} in any argument of a style function
+or in custom CSS.}
+
 \item{header_font_url}{Header Font URL. Defaults to
 \code{xaringanthemer_font_default("header_font_url")}. Modifies the
 \verb{@import url} elements.}

man/style_mono_light.Rd

@@ -63,6 +63,7 @@ style_mono_light(
   header_font_google = NULL,
   header_font_family = xaringanthemer_font_default("header_font_family"),
   header_font_weight = xaringanthemer_font_default("header_font_weight"),
+  header_font_family_fallback = "Georgia, serif",
   header_font_url = xaringanthemer_font_default("header_font_url"),
   code_font_google = NULL,
   code_font_family = xaringanthemer_font_default("code_font_family"),
@@ -374,6 +375,12 @@ argument of a style function or in custom CSS.}
 \href{https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight}{font-weight}
 property values.}
 
+\item{header_font_family_fallback}{Header Font Family Fallback. Defaults to
+Georgia, serif. Modifies the \verb{h1, h2, h3} elements. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(--header-font-family-fallback)} in any argument of a style function
+or in custom CSS.}
+
 \item{header_font_url}{Header Font URL. Defaults to
 \code{xaringanthemer_font_default("header_font_url")}. Modifies the
 \verb{@import url} elements.}

man/style_solarized_dark.Rd

@@ -60,6 +60,7 @@ style_solarized_dark(
   header_font_google = NULL,
   header_font_family = xaringanthemer_font_default("header_font_family"),
   header_font_weight = xaringanthemer_font_default("header_font_weight"),
+  header_font_family_fallback = "Georgia, serif",
   header_font_url = xaringanthemer_font_default("header_font_url"),
   code_font_google = NULL,
   code_font_family = xaringanthemer_font_default("code_font_family"),
@@ -353,6 +354,12 @@ argument of a style function or in custom CSS.}
 \href{https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight}{font-weight}
 property values.}
 
+\item{header_font_family_fallback}{Header Font Family Fallback. Defaults to
+Georgia, serif. Modifies the \verb{h1, h2, h3} elements. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(--header-font-family-fallback)} in any argument of a style function
+or in custom CSS.}
+
 \item{header_font_url}{Header Font URL. Defaults to
 \code{xaringanthemer_font_default("header_font_url")}. Modifies the
 \verb{@import url} elements.}

man/style_solarized_light.Rd

@@ -60,6 +60,7 @@ style_solarized_light(
   header_font_google = NULL,
   header_font_family = xaringanthemer_font_default("header_font_family"),
   header_font_weight = xaringanthemer_font_default("header_font_weight"),
+  header_font_family_fallback = "Georgia, serif",
   header_font_url = xaringanthemer_font_default("header_font_url"),
   code_font_google = NULL,
   code_font_family = xaringanthemer_font_default("code_font_family"),
@@ -353,6 +354,12 @@ argument of a style function or in custom CSS.}
 \href{https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight}{font-weight}
 property values.}
 
+\item{header_font_family_fallback}{Header Font Family Fallback. Defaults to
+Georgia, serif. Modifies the \verb{h1, h2, h3} elements. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(--header-font-family-fallback)} in any argument of a style function
+or in custom CSS.}
+
 \item{header_font_url}{Header Font URL. Defaults to
 \code{xaringanthemer_font_default("header_font_url")}. Modifies the
 \verb{@import url} elements.}

man/style_xaringan.Rd

@@ -63,6 +63,7 @@ style_xaringan(
   header_font_google = NULL,
   header_font_family = xaringanthemer_font_default("header_font_family"),
   header_font_weight = xaringanthemer_font_default("header_font_weight"),
+  header_font_family_fallback = "Georgia, serif",
   header_font_url = xaringanthemer_font_default("header_font_url"),
   code_font_google = NULL,
   code_font_family = xaringanthemer_font_default("code_font_family"),
@@ -359,6 +360,12 @@ argument of a style function or in custom CSS.}
 \href{https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight}{font-weight}
 property values.}
 
+\item{header_font_family_fallback}{Header Font Family Fallback. Defaults to
+Georgia, serif. Modifies the \verb{h1, h2, h3} elements. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(--header-font-family-fallback)} in any argument of a style function
+or in custom CSS.}
+
 \item{header_font_url}{Header Font URL. Defaults to
 \code{xaringanthemer_font_default("header_font_url")}. Modifies the
 \verb{@import url} elements.}

tests/testthat/css/duo-header_bg.css

@@ -31,6 +31,7 @@
   --text-font-base: sans-serif;
   --header-font-family: Cabin;
   --header-font-is-google: 1;
+  --header-font-family-fallback: Georgia, serif;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 1;
   --base-font-size: 20px;
@@ -70,7 +71,7 @@ body {
   color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: var(--header-font-family);
+  font-family: var(--header-font-family), var(--header-font-family-fallback);
   font-weight: 600;
   color: var(--header-color);
 }

tests/testthat/css/duo.css

@@ -31,6 +31,7 @@
   --text-font-base: sans-serif;
   --header-font-family: Cabin;
   --header-font-is-google: 1;
+  --header-font-family-fallback: Georgia, serif;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 1;
   --base-font-size: 20px;
@@ -70,7 +71,7 @@ body {
   color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: var(--header-font-family);
+  font-family: var(--header-font-family), var(--header-font-family-fallback);
   font-weight: 600;
   color: var(--header-color);
 }

tests/testthat/css/duo_accent.css

@@ -31,6 +31,7 @@
   --text-font-base: sans-serif;
   --header-font-family: Cabin;
   --header-font-is-google: 1;
+  --header-font-family-fallback: Georgia, serif;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 1;
   --base-font-size: 20px;
@@ -72,7 +73,7 @@ body {
   color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: var(--header-font-family);
+  font-family: var(--header-font-family), var(--header-font-family-fallback);
   font-weight: 600;
   color: var(--header-color);
 }

tests/testthat/css/duo_accent_inverse.css

@@ -31,6 +31,7 @@
   --text-font-base: sans-serif;
   --header-font-family: Cabin;
   --header-font-is-google: 1;
+  --header-font-family-fallback: Georgia, serif;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 1;
   --base-font-size: 20px;
@@ -72,7 +73,7 @@ body {
   color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: var(--header-font-family);
+  font-family: var(--header-font-family), var(--header-font-family-fallback);
   font-weight: 600;
   color: var(--header-color);
 }

tests/testthat/css/google_fonts.css

@@ -31,6 +31,7 @@
   --text-font-base: sans-serif;
   --header-font-family: 'IBM Plex Serif';
   --header-font-is-google: 1;
+  --header-font-family-fallback: Georgia, serif;
   --code-font-family: 'IBM Plex Mono';
   --code-font-is-google: 1;
   --base-font-size: 20px;
@@ -67,7 +68,7 @@ body {
   color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: var(--header-font-family);
+  font-family: var(--header-font-family), var(--header-font-family-fallback);
   font-weight: 600;
   color: var(--header-color);
 }

tests/testthat/css/mono_accent.css

@@ -31,6 +31,7 @@
   --text-font-base: sans-serif;
   --header-font-family: Cabin;
   --header-font-is-google: 1;
+  --header-font-family-fallback: Georgia, serif;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 1;
   --base-font-size: 20px;
@@ -71,7 +72,7 @@ body {
   color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: var(--header-font-family);
+  font-family: var(--header-font-family), var(--header-font-family-fallback);
   font-weight: 600;
   color: var(--header-color);
 }

tests/testthat/css/mono_accent_inverse.css

@@ -31,6 +31,7 @@
   --text-font-base: sans-serif;
   --header-font-family: Cabin;
   --header-font-is-google: 1;
+  --header-font-family-fallback: Georgia, serif;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 1;
   --base-font-size: 20px;
@@ -71,7 +72,7 @@ body {
   color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: var(--header-font-family);
+  font-family: var(--header-font-family), var(--header-font-family-fallback);
   font-weight: 600;
   color: var(--header-color);
 }

tests/testthat/css/mono_dark.css

@@ -31,6 +31,7 @@
   --text-font-base: sans-serif;
   --header-font-family: Cabin;
   --header-font-is-google: 1;
+  --header-font-family-fallback: Georgia, serif;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 1;
   --base-font-size: 20px;
@@ -71,7 +72,7 @@ body {
   color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: var(--header-font-family);
+  font-family: var(--header-font-family), var(--header-font-family-fallback);
   font-weight: 600;
   color: var(--header-color);
 }

tests/testthat/css/mono_light-header_bg.css

@@ -31,6 +31,7 @@
   --text-font-base: sans-serif;
   --header-font-family: Cabin;
   --header-font-is-google: 1;
+  --header-font-family-fallback: Georgia, serif;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 1;
   --base-font-size: 20px;
@@ -71,7 +72,7 @@ body {
   color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: var(--header-font-family);
+  font-family: var(--header-font-family), var(--header-font-family-fallback);
   font-weight: 600;
   color: var(--header-color);
 }

tests/testthat/css/mono_light.css

@@ -31,6 +31,7 @@
   --text-font-base: sans-serif;
   --header-font-family: Cabin;
   --header-font-is-google: 1;
+  --header-font-family-fallback: Georgia, serif;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 1;
   --base-font-size: 20px;
@@ -71,7 +72,7 @@ body {
   color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: var(--header-font-family);
+  font-family: var(--header-font-family), var(--header-font-family-fallback);
   font-weight: 600;
   color: var(--header-color);
 }

tests/testthat/css/solarized_dark-header_bg.css

@@ -31,6 +31,7 @@
   --text-font-base: sans-serif;
   --header-font-family: Cabin;
   --header-font-is-google: 1;
+  --header-font-family-fallback: Georgia, serif;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 1;
   --base-font-size: 20px;
@@ -68,7 +69,7 @@ body {
   color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: var(--header-font-family);
+  font-family: var(--header-font-family), var(--header-font-family-fallback);
   font-weight: 600;
   color: var(--header-color);
 }

tests/testthat/css/solarized_dark.css

@@ -31,6 +31,7 @@
   --text-font-base: sans-serif;
   --header-font-family: Cabin;
   --header-font-is-google: 1;
+  --header-font-family-fallback: Georgia, serif;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 1;
   --base-font-size: 20px;
@@ -68,7 +69,7 @@ body {
   color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: var(--header-font-family);
+  font-family: var(--header-font-family), var(--header-font-family-fallback);
   font-weight: 600;
   color: var(--header-color);
 }

tests/testthat/css/solarized_light.css

@@ -31,6 +31,7 @@
   --text-font-base: sans-serif;
   --header-font-family: Cabin;
   --header-font-is-google: 1;
+  --header-font-family-fallback: Georgia, serif;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 1;
   --base-font-size: 20px;
@@ -68,7 +69,7 @@ body {
   color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: var(--header-font-family);
+  font-family: var(--header-font-family), var(--header-font-family-fallback);
   font-weight: 600;
   color: var(--header-color);
 }

tests/testthat/css/xaringan.css

@@ -31,6 +31,7 @@
   --text-font-base: sans-serif;
   --header-font-family: Cabin;
   --header-font-is-google: 1;
+  --header-font-family-fallback: Georgia, serif;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 1;
   --base-font-size: 20px;
@@ -68,7 +69,7 @@ body {
   color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: var(--header-font-family);
+  font-family: var(--header-font-family), var(--header-font-family-fallback);
   font-weight: 600;
   color: var(--header-color);
 }