fit-text helper now triggers lazyily when slide enters view distance

css/layout.scss

@@ -16,6 +16,12 @@
 	box-sizing: border-box;
 }
 
+// Text that auto-fits it's container
+.reveal .r-fit-text {
+	display: inline-block; // https://github.com/rikschennink/fitty#performance
+	white-space: nowrap;
+}
+
 // Stack multiple elements on top of each other
 .reveal .r-stack {
 	display: grid;

js/controllers/slidecontent.js

@@ -2,6 +2,8 @@ import { HORIZONTAL_SLIDES_SELECTOR, VERTICAL_SLIDES_SELECTOR } from '../utils/c
 import { extend, queryAll, closest } from '../utils/util.js'
 import { isMobile } from '../utils/device.js'
 
+import fitty from 'fitty';
+
 /**
  * Handles loading, unloading and playback of slide
  * content such as images, videos and iframes.
@@ -159,6 +161,19 @@ export default class SlideContent {
 
 		}
 
+		// Autosize text with the r-fit-text class based on the
+		// size of its container. This needs to happen after the
+		// slide is visible in order to measure the text.
+		Array.from( document.querySelectorAll( '.r-fit-text:not([data-fitted])' ) ).forEach( element => {
+			element.dataset.fitted = '';
+			fitty( element, {
+				minSize: 24,
+				maxSize: this.Reveal.getConfig().height * 0.8,
+				observeMutations: false,
+				observeWindow: false
+			} );
+		} );
+
 	}
 
 	/**

js/reveal.js

@@ -25,8 +25,6 @@ import {
 	POST_MESSAGE_METHOD_BLACKLIST
 } from './utils/constants.js'
 
-import fitty from 'fitty';
-
 // The reveal.js version
 export const VERSION = '4.0.2';
 
@@ -283,15 +281,6 @@ export default function( revealElement, options ) {
 		dom.statusElement = createStatusElement();
 
 		dom.wrapper.setAttribute( 'role', 'application' );
-
-		// The r-fit-text helper resizes text to be as large as
-		// possible within its given container
-		fitty( '.r-fit-text', {
-			minSize: 24,
-			maxSize: config.height * 0.8,
-			observeMutations: false,
-			observeWindow: false
-		} );
 	}
 
 	/**