Skip to main content

Customizing Fonts and Appearance in the RStudio IDE

Posit Support
  • Updated

Customizing Fonts and Appearance

Specifying a Custom Font

By default, R Presentations use the Lato font. However, it's also possible to customize the font used within a presentation using the font-family field of the first slide. For example:

My Presentation
========================================
author: John Doe
font-family: 'Helvetica'

The semantics of this are the same as for a CSS font-family (i.e. you can specify a comma separated list of alternate fonts).

Note that if you use the default Lato font your presentation is guaranteed to always display with this font (since it is embedded within the presentation). However, if you specify an alternate font that font must be available on the system where the presentation is displayed (otherwise a fallback font will be utilized).

You can also import web fonts from a custom URL using the font-import field. For example:

My Presentation
========================================
author: John Doe
font-import: http://fonts.googleapis.com/css?family=Risque
font-family: 'Risque'

While importing a web font provides assurance that it will be available wherever the presentation is displayed, it does require an internet connection so is not a good solution where offline display of the presentation is required.

Smaller Text

If you need smaller text for certain paragraphs, you can enclose text in the <small> tag. For example:

<small>This sentence will appear smaller.</small>

Using Custom CSS

Specifying a Stylesheet

You can use CSS to customize the display of individual slides or spans of text. If you create a stylesheet within the same directory as your presentation that has the same base filename as your presentation it will be automatically imported. For example, if your presentation file is MyPresentation.Rproj then the file MyPresentation.css will be imported if it exists.

You can also explicitly specify a stylesheet file using the css field on the title slide. For example:

My Presentation
===================================
author: John Doe
css: custom.css

Finally, if you prefer to include styles right within the presentation source file you can also place them at the top of the source above the title slide (any style tags included there will automatically be appended to the head element).

Applying Styles

You can apply classes defined in your CSS file to individual slides by adding a class field to the slide. For example:

My Slide
===================================
class: illustration

You can apply classes defined in your CSS file to spans of text by using a span tag. For example:

My Slide
================================== 
<span class="emphasized">Pay attention to this!</span>

If you have a style that you need to apply to many spans of text, you might also consider overriding the appearance of the (infrequenly used) overstrike markdown syntax. To do this you'd create a style for the del tag and then adorn the spans of text you want to format with the ~~overstrike~~ delimiters.

To do this, you need to also include some additional scopes in the CSS definition. For example, here is some CSS to specify red text for the del tag:

.reveal section del {
  color: red;
}

Now the following text will be displayed red:

~~this text will be red~~

Overriding Default Element Styles

You'll note from the syntax above that we prefaced the specification of the del element with .reveal section. These additional scopes are necessary to ensure that the default slide deck CSS is properly overridden. For example, to change the default text color in paragraphs to blue you'd use:

.reveal section p {
  color: blue;
}

Custom Slide Types

The default slide types of section, sub-section, prompt, and alert provide custom background colors and other styles on a per slide type basis. Slides are designated to be of a certain type using the type field. You can create a custom slide type by providing the appropriately scoped CSS. For example, here is the CSS for a custom slide type named exclaim that sets it's background to black and foreground text to white.

.exclaim .reveal .state-background {
  background: black;
} 

.exclaim .reveal h1,
.exclaim .reveal h2,
.exclaim .reveal p {
  color: white;
}

Note that the use of .state-background is necessary to properly integrate with the default slide deck's DOM structure.

You can then designate a slide to be of this type using the following syntax:

My Exclamation
========================================
type: exclaim

You can typically also accomplish per-slide type appearance customization using the class field described above. However, the only way to customize the background color (or image) of a slide is to define a custom type.

Releated Topics

Related articles