4

I'm developing a webpage and I use Bootswatch for styling. Sometimes I have to work offline, and host locally. Unfortunately Bootswatch can't be used offline since it uses a version of Bootstrap css with an extra font at the begining:

@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");

This means build fails every time, and I can't deploy. I've seen the question: Bootstrap CSS without Google Fonts But it doesn't have a satisfactory answer. They suggest just deleting that line, but I still need it when deploying, and because of version updates it would get overwritten very fast anyway at the next update. I'm looking for a solution which either:

  • ignores the import, when offline
  • overwrites the import, when offline (ex. import manually the font, and then change the import for a local one), I'd very much like this version

And all this as a final solution, I don't want to change the code after every npm/bower update...

Community
  • 1
  • 1
Csongor
  • 51
  • 6

2 Answers2

4

The latest Bootswatch versions (> 3.3.6.1) introduce a SASS variable $web-font-path that you can override and set to an empty value:

// use google fonts api offline
$web-font-path: '';
@import "fonts.yeti.offline";

@import "yeti/variables";
@import "yeti/bootswatch";

To serve the required fonts offline, I used https://google-webfonts-helper.herokuapp.com to generate the fonts.yeti.offline.scss file and to download the required font files. To switch between online and offline mode, you can toggle the first two lines in your code.

RobDil
  • 4,036
  • 43
  • 52
  • Can you elaborate a bit? When you include the css file that specifies the location of the offline fonts, how do you get the online import to be ignored? – ventsyv Aug 18 '17 at 20:13
  • The bootswatch sass file contains a default! directive for the path. It will be set only if not set. By setting it to an empty string the follwing @import rule won't do anyrhing. See code here https://github.com/thomaspark/bootswatch/blob/gh-pages/yeti/_bootswatch.scss – RobDil Aug 20 '17 at 06:41
  • so basically "recompile" the boost library, correct? – ventsyv Aug 28 '17 at 20:03
  • Yes, your templates need to be recompiled. – RobDil Sep 18 '17 at 11:43
2

According to this and this discussions I found good and simple way to disable font loading in Bootswatch scss:

$web-font-path: false;
rfedorov
  • 689
  • 7
  • 11