Customize font size for all the slides in xaringan

Question

I'm using Yihui's awesome package xaringan to build html slides, and this might be a very simple question for those who are familiar with xaringan or css:

I can't figure out how to set the font size of all slides. I tried to define the font-size in a customized css, something like body{font-size: 200%} or body{font-size: xx-large}, and call it in the YAML:

output: xaringan::moon_reader: css: [custom.css]

Nothing changed. I know I can use the .large class to change the size of a certain amount of words and use class: large at the beginning of a slide to change the body font for the entire page. But, is there a way to avoid pasting class:large to every slide I build but set the font size all at once? Any suggestion will be appreciated!

Answer 1

The YAML header:

---
title: "Presentation Ninja"
subtitle: "⚔<br/>with xaringan"
author: "Yihui Xie"
date: "2016/12/12 (updated: `r Sys.Date()`)"
output:
  xaringan::moon_reader:
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

Try adding the following lines to your Rmd file or put it in your custom.css:

<style type="text/css">
.remark-slide-content {
    font-size: 30px;
    padding: 1em 4em 1em 4em;
}
</style>

Explanation:

• The above code overrides the default style for remark-slide-content to change font-sizes in your slides under the class remark-slide-content, which applies to all the text in your slides.

• During my testing, the padding should also be adjusted accordingly. Experiment it your self.

• Edited: The !important rule is not necessary when the slides are not self-contained (i.e. the CSS files were saved separately.)

• Edited again (see comments below):

To set the font-size for one page, first, define a class in the CSS section:

.my-one-page-font {
  font-size: 40px;
}

then add class: my-one-page-font before the slide title.