edited css does not change rmarkdown xaringan presentation

Question

I'm new to CSS and attempting to edit the formatting of a RMarkdown presentation using Xaringan. One change I'd like to make is increasing the line spacing of the slide text.

Here's the relevant part of the YAML yeader of my .Rmd file:

output:
  xaringan::moon_reader:
    css: "libs/remark-css/example.css"
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false

And in example.css , I've added a line-height to the body specifications:

body { 
  font-family: 'Palatino Linotype', 'Droid Serif', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif; 
  line-height: 1.5em;
} 

But when I go back to index.Rmd and knit the HTML file, the line spacing remains unchanged. The same is true if I try to change font, font size, etc. What am I doing wrong?

Answer 1

I just checked and it is possible to include .css files that are not located in the same directory as the .Rmd presentation file. Thus, if it isn't a problem with it not being able to find the file then it must be something with the contents of your .css file.

You can try to modify this example example.css file to suit your needs. It works and changes the background, fonts etc. Note that it is the part under .remark-slide-content that does the actual change.

@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700);

/* CE Added my favorite fonts */
@import url('https://fonts.googleapis.com/css?family=Alegreya|Alegreya+Sans');

body { font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
       background-color:#222;
     }

/* Default background colour, and font size */
.remark-slide-content{ background-color:#222;
                       font-family: 'Fira Sans', 'Yanone Kaffeesatz';
                       color: #fff;
                       font-size: 220%;    /* Regular text */
/*                     font-family: 'Alegreya Sans', sans-serif; */
                       font-family: 'Alegreya', serif;                 
                     }

My YAML looks like this (well part of it)

output:
  xaringan::moon_reader:
    lib_dir: libs
    css: ['default', 'example.css']

Does that do anything for you?