7

I try to implement Google Fonts (Dosis) into Bootstrap 4 using SASS / Gulp. I'm a total novice when it comes to SASS.

I managed to change the default colors using _custom.scss by defining $brand-primary, but when I want to do the same with the fonts by changing $font-family-sans-serif value it doesn't work. I restarted the server and included the Google fonts in the index.html with link tags...but still I can't get it to work.

Peter Pupovac
  • 85
  • 2
  • 7
  • Although the [question above](https://stackoverflow.com/questions/24075222/how-can-i-change-the-bootstrap-default-font-family-using-font-from-google) is not sass and gulp specific, there is an excellent answer for your setup as well. – dferenc Dec 03 '17 at 20:53

1 Answers1

8

You can import the chosen Google Font at the top of your _custom.scss like so.

@import url('https://fonts.googleapis.com/css?family=Dosis');

And you can define "Dosis" as a font family name like so:

$font-family-sans-serif: "Dosis", […other fonts…];

This should work once your sass is compiled.

dferenc
  • 7,918
  • 12
  • 41
  • 49