reveal.js - locally served with locally provided fonts-CodePudding

I was recently shooting myself in the foot with using the default google-fonts URL for fonts in my reveal.js presentation, as I had to reload the browser (switching presentations), and without Wifi the font cache was lost and wouldn't be rebuilt, and thus I ended up with a shitty looking typography of default sans serif.

So. I want to include the fonts for a reveal.js presentation, run locally from my laptop via npm start and 127.0.0.1:8000 so that the browser finds the fonts locally like it finds the html and css, without requiring Internet access.

This is what is in my custom scheme:

@import url('https://fonts.googleapis.com/css2?family=Roboto Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap');

// Override theme settings (see ../template/settings.scss)
$mainFont: 'Roboto Condensed', sans-serif;
$headingFont: 'Roboto Condensed', sans-serif;
...

How would I download the necessary fonts, and how would I change this scheme to use the local fonts?

CodePudding user response：

Can't you simply grab the fonts here https://github.com/davidcunningham/roboto-condensed/tree/master/fonts

Then add this in your stylesheet?

@font-face {
  font-family: 'RobotoCondensed-Regular';
  src: url('/path/to/fonts/RobotoCondensed-Regular.woff') format('woff')
}

Then call it in your styles

font-family:'RobotoCondensed-Regular';

**Repeat for each font-weight as this font is not variable.