10

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!

sammo3182
  • 153
  • 1
  • 9

1 Answers1

15

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.

TC Zhang
  • 2,757
  • 1
  • 13
  • 19
  • Thank you for the reply! A couple of issues of using this trick, though: (1) when I added the line in my css, it increased the size of the fonts not only in the `body` but also `h1,2,3`. Is there a way to avoid that? (2) It looks that once I used the trick, I loosed the control for the fonts for separate slides with `class:`. Sorry being annoying but in the practice, I do want to modify the font size for certain single slides. Does removing the `!important` allow that? – sammo3182 Nov 30 '18 at 00:29
  • I get it. so you want to be able to change the fonts (for contents) globally as well as changing some pieces locally, right? – TC Zhang Nov 30 '18 at 01:37
  • Exactly! Ideally, I hope to use .large{150%} as the default size globally, while using other sizes whenever they are needed. – sammo3182 Nov 30 '18 at 13:26
  • Hi, @sammo3182, I've tested & edited my code above. Let me know if it works for you. Forget about the `!important` in my original answer, I misused it. – TC Zhang Dec 01 '18 at 00:56
  • Thank you so much for the follow-up, @TC Zhang! The codes work perfectly until I tried to overwrite the font size of a *page*. Your codes allowed me to set the default font size globally and change the size of certain words or sentences using e.g., `.large[the word]`. Both are excellent! On the other hand, is there a possibility for me to overwrite the font size of one certain page? In the default mode of `xaringan`, I could do that by putting `class: small` before the section title of a slide. – sammo3182 Dec 02 '18 at 07:37
  • Sure, define a new class in the css section, for example: `.my-one-page-font {font-size: 40px; }` , then put `class: my-one-page-font` before the section title. – TC Zhang Dec 03 '18 at 00:30
  • Works just as I expected. Can't thank you more, @TC Zhang! – sammo3182 Dec 12 '18 at 13:06