Search code examples
reveal.js

How to add and change fonts in reveal.js?

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?

Solution

  • 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.