How to add and change fonts in reveal.js?

reveal.js
Luzan Baral picture Luzan Baral · Nov 10, 2014 · Viewed 14.9k times · Source

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?

Answer

Aatish Sai picture Aatish Sai · Nov 10, 2014

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.

Related questions

How to use two-column layout with reveal.js?

I use reveal.js and write my slides in Markdown code. Now I want to display my content (text, unordered list of bullet points or even an image) in a classical two-column text layout. I would prefer a solution which …

Read More
How to style images in reveal.js?

I am now trying to put transparent png image in reveal.js as: <div class="slides"> <section> <img src="sample.png"> <p>sample image</p> </section> </div&…

Read More
Fragments in reveal.js using Markdown

reveal.js supports fragments which will be shown one after another in HTML: <section> <p class="fragment grow">grow</p> <p class="fragment shrink">shrink</p> <p class="fragment …

Read More