adjust font size in reveal.js

Question

I'm trying to use Reveal.js to build a UX portfolio which is responsive. However, I noticed that most of the properties I write in a style sheet are overridden. Is there a way to force slideshows using Reveal.js to use custom CSS for font sizes and other settings?

Devout

Answer 1

Yes there is. For sure it's not the best way, but is simple and functional. Carefully, add "!important" to the setting you want to be adjusted. Like:

.reveal section p {
    font-weight: bold !important;
    font-size: 1.1em !important;
}

.reveal section pre code {
    font-size: 0.7em !important;
}

Hope this helps!

Barby

Answer 2

You can override the variable --r-main-font-size - used by all of the out-of-the-box themes provided by revealjs.

<style type="text/css">
    :root {
        --r-main-font-size: 30px;
    }
</style>

Libradalibrarian