Portfolio site looks great in codepen, but no fonts coming in on the web

Code Feedback
1

So here is my codepen: https://codepen.io/robrodenparker/pen/jmgJLW

I’m using 3.3.7 bootstrap, not the quick load version, but I don’t think I’m having any problems with that. I want my body font to be Bree Serif. I did the googleapis link, made the body css Bree Serif, and I even added an @import statement to the css file.

But…on the web the font is not there: http://www.robrodenparker.com/

I tried single and double quotes around Bree Serif in the CSS but that didn’t help. Even had no quotes. It all seems to be correct, but it’s not showing on the web.

Any ideas?

Here’s part of my index.html:

<head>
	<title>Rob RodenParker | Web Developer Portfolio</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
	<script src="https://use.fontawesome.com/2102bbb49d.js"></script>
</head>

Here’s part of my CSS:

@import url(https://fonts.googleapis.com/css?family=Bree+Serif);

body {
  font-family: 'Bree Serif', serif;
  background-color: white;
  color: white;
}
2

Try using this link in html
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
then put this in your css
font-family: ‘Bree Serif’, serif;

3

I have the link in my head tag, plus the same css syntax in my style.css file. That’s why I’m confused.