24

I'm working with reveal.js for my next presentation, I want to change the default fonts used for headings.

How can I add and change fonts in reveal.js?

Alex Kulinkovich
  • 4,408
  • 15
  • 46
  • 50
Luzan Baral
  • 3,678
  • 5
  • 37
  • 68

3 Answers3

20

You can do it be modifying the css file of the current theme you are using.

The theme file is located in the folder /css/theme/[yourtheme].css

Once you open the css file for your theme you can see the section for header like below

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  margin: 0 0 20px 0;
  color: #eee8d5;
  font-family: "League Gothic", Impact, sans-serif;
  line-height: 0.9em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: none; }

Now you can modify any attribute of you header.

Aatish Sai
  • 1,647
  • 1
  • 26
  • 41
4

Actually there are lots of fonts. It's just that you have to go around different themes to find appropriate ones for your presentation. I had similar issue with default theme, change it to other theme, find theme inside css/theme

To change theme, change on link tag in index.html file

<link rel="stylesheet" href="css/theme/default.css" id="theme">

change default.css to any other theme files

<link rel="stylesheet" href="css/theme/solarized.css" id="theme">

Hope it works.

Still if you want to change fonts then, you can change font-family for each tag inside the theme you'll be using by going to the css file of the theme.

2

To add to aatish-sai's answer (thanks!).

A base theme template is here: https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss.

If I want to change the displayed fonts (say, to Fira Sans) in reveal.js slides generated from a jupyter notebook foo.ipynb, it suffices to write the following text

.reveal,
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  font-family: "Fira Sans";
}

to the file foo.css in the same directory as the notebook.

coltongrainger
  • 35
  • 5