Bootsrap 3.3.6 via MAXCDN customise font family using custom.css

Question

I have created a website that uses Bootstrap 3.3.6 loaded from the MAXCDN Content Delivery Network (for reference the code is at the end of the question).

My intent is to make my changes to the Bootstrap by loading in a custom.css (from my research I belive this to be one of a few commonly used and accepted methods for customising a bootstrap site).

My question is how do I change the font-family throughout bootstrap via my custom.css.

The font-family's I would like to use are all Google fonts delivered from fonts.googleapis.com, but I think an answer to this question may be useful to anyone using webfonts.

font-family: 'Roboto', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Roboto Slab', serif;

**Google HTML Link:** <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,700,700italic,500italic,900,900italic|Roboto+Condensed:400,300,300italic,400italic,700,700italic|Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>

**Google CSS Import:** @import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,700,700italic,500italic,900,900italic|Roboto+Condensed:400,300,300italic,400italic,700,700italic|Roboto+Slab:400,100,300,700);

For reference code from load section

<!-- Bootsrap // Load latest version from MAXCDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">    

<!-- jQuery library // Load latest version from GOOGLEAPIS  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Bootstrap JavaScript // Load latest version from MAXCDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>    

<!-- Bootstrap Font Awesome // Load latest version from MAXCDN-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<!-- LOCAL CSS -->
<link rel="stylesheet" type="text/css" href="css/custom.css">

Answer 1

You can use @import at the top of you custom CSS..

/* custom.css */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ital...

or, a better option is to add the font LINK to your head before your custom.css..

<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,700,700italic,500italic,900,900italic|Roboto+Condensed:400,300,300italic,400italic,700,700italic|Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/custom.css">

Then you can apply the font-family:.. whereever you want in the custom.css.

For the entire body, or for specific elements..

body {
   padding-top:50px;
   font-family: 'Roboto', sans-serif;
}

h1 {
   font-family: 'Roboto Slab', serif;
}

Bootply example