Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use different fonts in Bootstrap 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.

like image 226
CodeMan Avatar asked Nov 30 '22 15:11

CodeMan


1 Answers

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.

like image 185
Syed Avatar answered Dec 04 '22 00:12

Syed