4

I'm a newbie. I know I can assign different fonts for Bootstrap 4 like this default,

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";

What I want to know if I try to build a website with two font pairing for example,

font-family: "Roboto", "Open Sans";

How would the above code affect elements of Bootstrap 4. Which elements will get Roboto or Open Sans.

CodeMan
  • 314
  • 2
  • 3
  • 5
  • Depends what class or is you assign that new font family to. Are you assigning it to h1? p? *? What does the lines before font-family look like? – Jack Moody Nov 02 '17 at 17:31
  • @Jack I think you mean I have to assign them as needed for each element of Bootstrap else they all default to Roboto for the example above? – CodeMan Nov 02 '17 at 17:37
  • See the answers below. They clear up what I mean by this. – Jack Moody Nov 02 '17 at 17:38
  • Why can't this be answered w/o referring to "Roboto"? Is it even possible to use a font other than Roboto? What if I naively inquired about using 3 fonts w/o any of them being Roboto? Forgive me if that's an absurd question. Seems Roboto is bootstrapped into bootstrap! Roboto. – infin80 Sep 17 '19 at 00:25

7 Answers7

19

For scss users:

Say you picked google fonts from here (pick less to load page fast): https://fonts.google.com/specimen/Roboto

And, placed it in your index.html in <head>: 

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

Or, placed it in your stylesheet:

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
</style>

and in scss do this:

$font-family-base: 'Roboto', sans-serif; // add this line first before importing bootstrap
@import "~bootstrap/scss/bootstrap";

that's it.

Syed
  • 15,657
  • 13
  • 120
  • 154
  • So in order to replace Roboto you're saying use Roboto and put that in the HEAD of my HTML and that will allow me to use "Open Sans"? – infin80 Sep 17 '19 at 00:31
  • @infin80 you got it wrong, if you like to use Roboto or any other font then use any one method that I have defined above (either import font link in head or in your stylesheet) – Syed Sep 18 '19 at 18:04
2

You can override the bootstrap classes with your own css rules.

For example:

p {
  font-family: "Roboto", sans-serif;
}
Dario
  • 618
  • 1
  • 11
  • 28
1

This would be assigned in whatever element you are trying to style, so for example:

h1,h2,h3,h4,h5,h6 {
font-family: "Roboto";
}

This would assign Roboto to all the Headings...

Klooven
  • 3,858
  • 1
  • 23
  • 41
Jack Isaacs
  • 106
  • 1
  • 8
1

You can also use bootstraps sass variables to change the default font-family. This is what default value is $font-family-sans-serif: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

$font-family-sans-serif: Roboto;

You can change it to whatever you want and build it using sass compiler.

Manoj
  • 497
  • 7
  • 13
1

I am guessing you want the base font to be "Open Sans" and all headings to be "Roboto". If you're using scss you will only have to change these two variables;

$font-family-base:            'Open Sans', sans-serif;
$headings-font-family:        'Roboto', sans-serif;
Semisi Taufa
  • 9
  • 1
0

In addition, you can also specify for which paragraphs should each font be applied:

<p class="sentenceA">First Paragraph with Roboto font applied to it.</p>
<p class="sentenceB">Second Paragraph with Open Sans font applied to it.</p>
<p class="sentenceC">Third Paragraph with Roboto and Open Sans fonts applied to it.</p>

//and in your stylesheet have something like:    

    .sentenceA p
    {
        font-family: "Roboto";
    }

    .sentenceB p
    {
      font-family: "Open Sans";
    }        

    .sentenceC p
    {
       font-family: "Roboto", "Open Sans";
    }

Hope this helps.

Tebogo Khanye
  • 380
  • 1
  • 7
  • 18
-4

Since BootStrap4 uses jQuery to view most of it's features upon page load, it is not possible to change font-family by a simple css. We can use simple jQuery code to achieve this.

$(document).ready(function(){
$("div").css("font-family",'"Comic Sans MS", cursive, sans-serif');
})

The above snippet will change regular font-family to 'Comic Sans MS' format.

user13369396
  • 19
  • 1