2

So I don't understand how to change the Bootstrap font family. I searched for the answer already and found this link: https://stackoverflow.com/a/29952126/9183058. I understand this link says what to do, but it doesn't tell me HOW to do it in simple terms. Like even though there is a breakdown in the link, it still isn't simple enough for me to understand. 

$font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;

Do I just completely remove everything from -apple-system forward, and then do the Google Fonts link? Like I don't understand. And there are no video tutorials I could find.

I also imported the Google Fonts stylesheet link in my HTML, and then called it in the body { in my SCSS file, but it's not overwriting the Bootstrap font family.

Any help is appreciated. If someone has a video I didn't find, please link it. Thanks!

Buckyx55
  • 434
  • 5
  • 23
  • SCSS files need to be compiled into regular css files (because the browser can only interpret css, not sass). Do you have a process set up to do so? – WebDevBooster Jan 28 '18 at 03:55
  • Yes I'm using npm to have a live version which is displaying things, but still not adjusting the font? – Buckyx55 Jan 28 '18 at 04:19

1 Answers1

-1

First, get the starter template from Bootstrap and then add the following row into the <head> section: 

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Then create a CSS file and add the following:

.Roboto-font {font-family: 'Roboto', sans-serif;}

Now you can use this font in your html <body> section:

<p class="Roboto-font">This is text with my favourite font.</p>

Example: https://codepen.io/ACqcE85feW/pen/gObeOdY

Peter
  • 1,224
  • 3
  • 16
  • 28