How can I add the custom fonts added in my css to my reveal.js presentation with html-inline?

I downloaded the reveal.js demo (https://github.com/hakimel/reveal.js) and added this custom.css file:

@font-face {
    font-family: 'myCustomFont';
    src: url(../lib/font/myCustomFont.ttf) format('truetype');
}

.my-class h1 {
    font-size: 5em;
    font-family: "myCustomFont";
}

Then in the index.html I add this to the presentation:

<link rel="stylesheet" href="css/custom.css">

And I add the style class also in the index.html:

<div class="slides">
    <section class="my-class"><h1>Slide 1</h1></section>
    <section>Slide 2</section>
</div>

Now when I try to get the whole thing inline with html-inline (https://www.npmjs.com/package/html-inline)

html-inline -i index.html -o indexInline.html

what happens is that only the font-size from the css are in the indexInline.html but not the custom font. How can I get the font into the inline html as well?

I'm looking for a way to get my reveal.js presentation into one single html file so if this does not work with html-inline are there any other ways to achieve that?

Solution

You need your final HTML file to include CSS where the src is a data url:

@font-face {
 font-family: 'myCustomFont';
 src: url(data:font/ttf;base64,AAEAAAATAQAABAAwR1BPU+Df...);
}

I'm guessing the inliner tool you tried doesn't support fonts. Perhaps there is another tool that does?

You can manually inline the font in your CSS before passing it to the inliner tool following these instructions. (TLDR: Use Webfont Generator)

A low-tech solution might just be using Internet Explorer's save-as "Web Archive, single file (*.mht)" feature. Although other browsers like Chrome don't support saving to this format, I think most browsers support viewing them. (Drag-and-drop the file into the browser if the MHT extension is not associated.)