84

I am using R Markdown in RStudio and the knit HTML option to create HTML output. However, the font used in the ouput for plain text blocks is rather small and I would like to change it to a differnt font and increase the font size. Can someone show an example how to set the output font - workable without a lot of knowledge in html?

So far I tried at the top of my markdown document, but this doesn't work. 

---
fontsize: 24pt
---
Yihui Xie
  • 28,913
  • 23
  • 193
  • 419
Bärbel
  • 995
  • 1
  • 8
  • 7

6 Answers6

74

You can change the font size in R Markdown with HTML code tags <font size="1"> your text </font> . This code is added to the R Markdown document and will alter the output of the HTML output.

For example:

 <font size="1"> This is my text number1</font> 

 <font size="2"> This is my text number 2 </font>
 
 <font size="3"> This is my text number 3</font> 
 
 <font size="4"> This is my text number 4</font> 
 
 <font size="5"> This is my text number 5</font> 
 
 <font size="6"> This is my text number 6</font>
NelsonGon
  • 13,015
  • 7
  • 27
  • 57
RRuiz
  • 2,159
  • 21
  • 32
  • 17
    The whole idea of RMarkdown is reproducible work done solely in R, with controls provided by the `knitr` and `rmarkdown` document or chunk options. Editing the final HTML is probably the worst thing you could be asking for with RMarkdown-based workflow. – StasK Feb 17 '18 at 21:16
  • 9
    Nice. But if i prefer to use all the tools to make my work. I do not like to be bounded. If my work is reproducible, there is not reason to discriminate technicals. If we would do what you are recommending without a valid argument, we would never develop revolutionary things fast enough. – RRuiz Feb 18 '18 at 21:24
  • 8
    @StasK How is that not reproducible? The poster is suggesting adding the HTML to the .Rmd, not to the final HTML (which I agree would be a very bad idea.) – jtr13 Nov 24 '19 at 15:08
  • 1
    @jtr13 I think the initial answer proposed to literally edit HTML, while the later edits changed it to modify the formatting out of Markdown. With that, I can happily agree. – StasK Apr 06 '20 at 13:49
71

I think fontsize: command in YAML only works for LaTeX / pdf. Apart, in standard latex classes (article, book, and report) only three font sizes are accepted (10pt, 11pt, and 12pt).

Regarding appearance (different font types and colors), you can specify a theme:. See Appearance and Style.

I guess, what you are looking for is your own css. Make a file called style.css, save it in the same folder as your .Rmd and include it in the YAML header:

---
output:
  html_document:
    css: style.css
---

In the css-file you define your font-type and size:

/* Whole document: */
body{
  font-family: Helvetica;
  font-size: 16pt;
}
/* Headers */
h1,h2,h3,h4,h5,h6{
  font-size: 24pt;
}
Gregor Thomas
  • 136,190
  • 20
  • 167
  • 294
jmjr
  • 2,090
  • 2
  • 21
  • 31
  • It still seems to ignore whatever fontsize I put in the css-file. – Bärbel Mar 29 '15 at 10:30
  • From the looking at the html document generated it seems to never read style.css - any ideas? Mesozooplankton modelling – Bärbel Mar 29 '15 at 10:37
  • Do you have proper identation in the yaml header? For reference, please see [here](http://rmarkdown.rstudio.com/html_document_format.html), section "Custom CSS". – jmjr Mar 31 '15 at 07:51
  • 1
    Bärbel have you checked for wrong indentation? It is really important to have the correct number of spaces preceding YAML commands, i.e. in the above example: 2 space preceding "html_document:", 4 spaces preceding "css: style.css". – jmjr Apr 04 '15 at 09:27
  • Thanks, jmjr - the indentation seems to be correct though :( – Bärbel Apr 05 '15 at 18:14
  • hm, strange. For me, the example in the post works perfectly. maybe you can post some of your code. Or you start from scratch, first build a minimal example and check if it works there and then stepwise add your content. – jmjr Apr 07 '15 at 14:35
  • Thank you so much jmjr for your comments! Actually, and quite embarrassingly, it turned out that I run an old version of RStudio. After I updated it, your solution worked perfectly :) – Bärbel Apr 09 '15 at 13:15
  • 1
    @Bärbel: It would be really nice if you would go back and delete all the (now) useless comments. Would save time for future readers. – IRTFM Apr 10 '16 at 22:47
  • How do we load a font from a local file with this method? – gabagool Jan 03 '23 at 21:17
41

These answers are overly complicated. You can change the main body font size (as well as any other CSS you might want to change) simply by embedding CSS directly into the Rmarkdown document using the html <style> tag. You do not need an entire CSS file for something so simple. If you are doing a lot of CSS then use a separate CSS file. If you are just modifying a couple of simple things I would do it like this.

---
title: "Untitled"
author: "James"
date: "9/29/2020"
output: html_document
---

<style type="text/css">
  body{
  font-size: 12pt;
}
</style>


```{r setup, include = FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
jamesguy0121
  • 1,124
  • 11
  • 28
  • You can also use a css code block, opening with ```{css} instead of using the ` – Brian Stamper Sep 19 '22 at 18:58
16

I would definitely use html markers to achieve this. Just surround your text with <p></p> or <font></font> and add the desired attributes. See the following example:

<p style="font-family: times, serif; font-size:11pt; font-style:italic">
    Why did we use these specific parameters during the calculation of the fingerprints?
</p>

This will produce the following output

Font Output

compared to

Default Output

This would work with Jupyter Notebook as well as Typora, but I'm not sure if it is universal.

Lastly, be aware that the html marker overrides the font styling used by Markdown.

itsmysterybox
  • 2,748
  • 3
  • 21
  • 26
KareemJ
  • 744
  • 10
  • 15
1

I had the same issue and solved by making sure that 1. when you make the style.css file, make sure you didn't just rename a text file as "style.css", make sure it's really the .css format (e.g, use visual studio code); 2. put that style.css file in the same folder with your .rmd file. Hopefully this works for you.

YujieCui
  • 11
  • 1
0

To change the font size, you don't need to know a lot of html for this. Open the html output with notepad ++. Control F search for "font-size". You should see a section with font sizes for the headers (h1, h2, h3,...).

Add the following somewhere in this section.

body {
  font-size: 16px;
}

The font size above is 16 pt font. You can change the number to whatever you want.

Eric Olberding
  • 1
  • 2
    This suggestion edits the resulting HTML file. If later on the .Rmd is re-knitted to a new HTML, it will lose this editing. Unless the HTML is really, really, *really* final and there will be no need to reproduce it using the .Rmd somewhere else, this can be (albeit not recommended) acceptable. – Nuclear03020704 Jun 12 '20 at 05:09