Fonts not showing, have tried fixes - html

Question

In my website, I have added fonts (in my CSS) and have tried to use them in my website, but they don't show up. I have used three fixes:
FIX 1:
body {
-webkit-animation-duration: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0.1s;
}
#-webkit-keyframes fontfix {
from { opacity: 1; }
to { opacity: 1; }
}
FIX 2:
$(‘body’)
.delay(500)
.queue(
function(next){
$(this).css(‘padding-right’, ‘1px’);
});
FIX 3:
jQuery.fn.redraw = function() {
return this.hide(0, function(){jQuery(this).show()});
};
jQuery(document).ready(function() {
jQuery('body').redraw();
});
They have all had no effect, and my website stays the same. It could be Chrome, my computer, or I might've incorrectly linked the sites, I don't know. Any help would be appreciated. Here is my code (I left out my JavaScript as it is irrelevant):
HTML
<main class="content" role="main">
<section class="section two">Ut dui diam, vulputate a gravida non, ullamcorper ac leo. Aenean pellentesque feugiat quam ac facilisis. Sed aliquam justo vel augue tincidunt facilisis. Phasellus lacinia quis sem sed aliquam. Etiam ultrices in arcu vel elementum. Maecenas scelerisque leo nec elit convallis, sagittis tincidunt purus consectetur. Cras gravida fringilla sem, in lacinia diam interdum sit amet. Nunc viverra nunc vitae diam malesuada, eu sollicitudin erat feugiat. Sed sed dapibus dui. Nullam a convallis erat, quis malesuada mi. Nunc vel malesuada elit. Proin a finibus turpis. Nullam faucibus magna sed felis fermentum iaculis. Nam et faucibus odio, vel viverra purus. Fusce pellentesque tincidunt ante, vitae tempor purus pulvinar eget. Fusce luctus orci sit amet nisi tincidunt, ut ullamcorper quam posuere. Vivamus elit massa, aliquam sed lectus non, condimentum accumsan turpis. Duis purus nibh, suscipit in lectus quis, dapibus rutrum turpis. Phasellus tristique nulla non ipsum lacinia, quis mattis quam laoreet. Vivamus sagittis, ante id sodales rutrum, odio eros commodo risus, quis consectetur lacus nunc vitae neque. Donec mauris urna, fringilla et laoreet fermentum, porttitor at nibh. Donec lorem magna, vulputate a ligula ut, tempor sollicitudin erat. Curabitur lobortis fringilla diam, a sodales nibh placerat ac. Aenean id feugiat dolor. Suspendisse potenti. Donec sed sem eu felis ullamcorper laoreet. Nunc blandit ut nibh nec condimentum. Phasellus a tincidunt ipsum. Quisque blandit congue lacus vitae venenatis. Suspendisse sit amet lobortis velit. Duis rhoncus vehicula elementum. Cras in viverra nunc. Maecenas egestas molestie mauris at placerat. Suspendisse congue faucibus est et aliquam. Nam rutrum sapien et iaculis eleifend. Donec eu tincidunt urna, quis ultrices purus. Curabitur sagittis tempus risus nec congue. Donec a felis nec dui interdum condimentum et a tortor. Quisque eget diam vitae turpis tristique imperdiet nec eget est. Sed gravida nec orci ac feugiat. Nulla et erat neque. Integer sit amet velit ornare quam rutrum tincidunt. Ut sollicitudin, nisi at porttitor maximus, nisi dui volutpat massa, non dictum diam nisi id nisi. Sed pretium ligula vitae sollicitudin bibendum. Donec viverra lorem et lectus elementum, imperdiet tempor erat cursus. Aliquam id viverra purus. In hac habitasse platea dictumst. Phasellus vel libero ac sem mollis auctor eu vitae libero. Mauris sit amet metus condimentum, consectetur tellus eget, ullamcorper orci. Donec vel arcu eros. Pellentesque vitae nulla a nisi mattis malesuada ac in dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse rhoncus tempor purus eu gravida. Pellentesque sollicitudin, elit eu cursus finibus, quam est cursus justo, at iaculis orci neque quis elit. Aliquam auctor vel leo sit amet faucibus. Maecenas neque diam, pretium sit amet nisi non, eleifend tempus elit. Pellentesque pulvinar turpis elit, in tempus ex efficitur sed. Morbi ornare elementum enim. Donec venenatis pellentesque ante, laoreet pretium leo varius in. Aliquam eu sapien vitae nibh imperdiet consectetur. Nunc ultricies venenatis nisi quis sagittis. In hac habitasse platea dictumst. Aenean malesuada placerat neque id congue. Pellentesque sagittis euismod quam, vel convallis diam. Nunc scelerisque nibh nec congue finibus. Pellentesque non lacinia nibh, id accumsan eros. Aliquam feugiat fringilla sem. Vivamus porta metus in libero cursus, et ornare elit eleifend. Phasellus venenatis pellentesque venenatis. Nullam feugiat condimentum justo, et molestie sapien varius eget. Curabitur suscipit ex vel erat luctus, consectetur aliquet enim placerat. Vivamus id vehicula dolor, nec volutpat lectus. Integer lacinia, dolor et rhoncus blandit, sapien leo fringilla risus, nec maximus libero erat eget quam. Sed sit amet magna purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</section>
<section class="section three">
<h2>Three</h2>
</section>
<section class="section four">
<h2>Four</h2>
</section>
</main> Top
<!-- Footer -->
<footer class="fixed_footer">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ducimus nemo quo totam neque quis soluta nisi obcaecati aliquam saepe dicta adipisci blanditiis quaerat earum laboriosam accusamus nesciunt! Saepe ex maxime enim asperiores nisi. Obcaecati nostrum nobis laudantium aliquam commodi veniam magni similique ullam quis pariatur voluptatem harum id error.</p>
</div>
</footer>
</body>
CSS
/* Fonts */
#import url(http://fonts.googleapis.com/css?family=Teko:700);
#import url(http://fonts.googleapis.com/css?family=Exo:400,900);
#import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,900italic,900,700italic,700,500italic,500,400italic);
#import url(http://fonts.googleapis.com/css?family=Bitter:400,700);
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);
#import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
/* Body */
* {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif
}
/* Header */
/* Shrinking */
/* ClearFix */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
font-family: "Teko", sans-serif;
top: 30px;
*zoom: 1;
width: 100%;
height: 100px;
background: #02236a;
position: fixed;
z-index: 9999;
box-shadow: 0 4px 4px rgba(0,0,0,0.1);
}
/* Header Styles */
.small {
height: 80px;
}
.small .logo {
width: 240px;
height: 80px;
}
.nav {
width: 80%;
}
.logo {
float:left;
}
/* Transitions */
header, .logo {
-webkit-transition: all 1s;
transition: all 1s;
}
/* Navigation */
ul li {
float: left;
margin-left: 50px;
padding-top: 45px;
color: #fafafa;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
ul li:hover {
color: #ffba00;
}
/* Social Icons */
.sicf {
z-index: 9999;
position: fixed;
height: 30px;
width: 100%;
background-color: #001f4c;
}
/* Icons */
#social-icons li {
float: left;
}
.facebook, .google, .twitter, .youtube {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.facebook:hover {
background-color: #3b5998;
}
.google:hover {
background-color: #dd4b39;
}
.twitter:hover {
background-color: #00aced;
}
.youtube:hover {
background-color: #92291b;
}
/* Main Content */
*,
*:before,
*:after {
box-sizing: border-box;
font: 300 1em/1.5 'Merriweather', serif;
color: #242424;
padding: 0;
margin: 0;
}
html,
body {
background: rgb(236, 240, 241);
}
.content {
margin: auto;
margin-bottom: 350px;
/* Same height as footer */
}
/* Slider */
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
z-index: 10;
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
/* Top Button */
.cd-top {
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
/* image replacement properties */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: #3d4942 url(../IMG/cd-top-arrow.svg) no-repeat center 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 0.6;
}
.no-touch .cd-top:hover {
background-color: #e86256;
opacity: 0.6;
}
/* Footer */
.fixed_footer {
width: 100%;
height: 350px;
background: #111;
position: fixed;
left: 0;
bottom: 0;
z-index: -100;
}
.fixed_footer p {
color: #696969;
column-count: 2;
column-gap: 50px;
font-size: 1em;
font-weight: 300;
}
/* Miscellaneous */
a {
text-decoration: none;
}
li {
list-style: none;
}
/* Font Fix */
body {
-webkit-animation-delay: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-duration: 0.1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes fontfix {
from { opacity: 1; }
to { opacity: 1; }
}
/* Delete */
.section {
max-width: 100%;
height: 42em;
padding: 10px;
}
.section h2 {
color: #fff;
font-size: 6em;
font-weight: 200;
text-align: center;
padding: 2.5em 0;
}
.one {
background: #6bb6ff;
}
.two {
background: #1E90FF;
}
.three {
background: #8B4789;
}
.four {
background: #872657;
}
Also, here is a rough fiddle.

Answer 1

The following line (#136 in big.css) is the culprit:
font: 300 1em/1.5 'Merriweather', serif;
This overwrites the previous font declaration of "Roboto" to "Merriweather", which isn't loaded anywhere.
Also, don't forget to add a trailing semicolon to font-family: "Roboto", sans-serif.
Your browser's builtin developer tools, namely the element inspector, are your best friend when it comes to troubleshooting CSS.
In this particular case, I opened the Chrome Dev Tools element inspector by pressing CTRL+SHIFT+I, navigated to the "Elements" tab (you can also right-click a specific element) and looked through the CSS rules applied the the body element, which revealed the overwrite:
A strike-through informs you that a rule wasn't applied, possibly because it is invalid or another rule took precedence.