1

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?

0__
  • 66,707
  • 21
  • 171
  • 266

1 Answers1

1

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.

avia
  • 1,527
  • 7
  • 19
  • Thank you, I will try that. So in turn I remove the `@import` line entirely? – 0__ Nov 04 '21 at 13:41
  • @0__ yes, as your fonts are now entirely stored locally and fetched locally. – avia Nov 04 '21 at 13:42
  • here it shows how to add italics, bold, etc: https://stackoverflow.com/questions/12812441/how-do-i-use-woff-fonts-for-my-website – 0__ Nov 04 '21 at 22:25
  • @0__ interesting stuff, I always hacked it but i'll use this method from now on, thanks ! – avia Nov 05 '21 at 13:49