I've made sure that when i import the fonts.css by linking it into main.css, the import action is at the top. I've used woff format since i read that it loads faster, i've tried moving the fonts file and i've gone over the lines to make sure the syntax is right as well.

I'll use select codes:

The heading should shouw the most noticable change:

div.article-grid div.horizontal h1 {
    
    color:#0991A9;
    
    font-family:Museo-500, sans;
    
    font-size:42px;
    
    border-bottom:3px #0991A9 solid;
    
    width:auto;
    
    text-transform: uppercase;
    
    margin:0px 30px 25px 0px;
    
}

This is the relevant code in fonts.css

@font-face {
    font-family: 'Museo-500';

    src: url('fonts/Museo-500.woff') format('woff'),
		
	url('fonts/Museo-500.eot#iefix') format('embedded-opentype'), 

    url('fonts/Museo-500.ttf') format('truetype'),

    url('fonts/Museo-500.svg#Museo-500') format('svg');
}

This is how i'm importing fonts.css into main.css (line 1)

@import url("css/common/fonts/fonts.css");

All the custom fonts are in a folder named fonts which i have put in css/common and also tried to put folder fonts outside.