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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With