Add Google Fonts to Bootstrap 4 with SASS / Gulp

Question

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.

Answer 1

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.