Hello,
This is the first time in my life that i have problems with custom fonts… the are JUST not loading what ever i do… i have created a folder inside the CSS directory named fonts and inside there all fonts which i have converted using Squirrel font i am trying to change the font family of my " H1" but it’s not working…
My CSS:
/* Vaud Light */
@font-face {
font-family: 'VaudBold';
src: url('fonts/Vaud-Bold.eot'); /* IE9 Compat Modes */
src: url('fonts/Vaud-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/Vaud-Bold.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/Vaud-Bold.woff') format('woff'), /* Pretty Modern Browsers */
url('fonts/Vaud-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small , strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
}
body {
background: #FFF;
height: 100%;
width: 100%;
line-height: 1;
}
img {
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: transparent;
}
ol, ul {
list-style: none;
}
:focus {
outline: 0;
}
a:focus {
text-decoration: none;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
text-decoration: none;
}
a, button, [type="submit"] {
-webkit-transition: 0.25s ease-in-out all;
-o-transition: 0.25s ease-in-out all;
-moz-transition: 0.25s ease-in-out all;
transition: 0.25s ease-in-out all;
}
a:hover {
text-decoration:none;
}
::-moz-selection {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1c2329,endColorstr=#1c2329)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1c2329,endColorstr=#1c2329); /* IE6 & 7 */
zoom: 1;
background: #1c2329;
color: #FFF;
}
::selection {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1c2329,endColorstr=#1c2329)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1c2329,endColorstr=#1c2329); /* IE6 & 7 */
zoom: 1;
background: #1c2329;
color: #FFF;
}
::-moz-selection {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1c2329,endColorstr=#1c2329)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1c2329,endColorstr=#1c2329); /* IE6 & 7 */
zoom: 1;
background: #1c2329;
color: #FFF;
}
.object {
height: 39px;
width: 100%;
}
.ox-logo {
padding-top: 92px;
}
h1 {
color: #FFF;
font-family: "VaudBold";
text-align: center;
}
/* Header */
header {
background: url(../images/header.jpg) no-repeat;
height: 386px;
}
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
h1 {
font-size: 52px;
}
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
.container {
width: 936px;
}
h1 {
font-size: 52px;
padding-top: 100px;
}
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
.container {
width: 936px;
}
h1 {
font-size: 52px;
padding-top: 100px;
font-family: "VaudBold";
}
}
And my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Orangeworx - Aanbieding voor Advocatenkantoor Schiekade</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon" />
<!-- CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/orangeworx.css" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="ox-logo">
<object data="assets/images/orangeworx-logo.svg" class="object" type="image/svg+xml"></object>
</div>
<h1>Aanbod voor Schiekade Advocaten</h1>
</div>
</div>
</header>
<section>
</section>
<section>
</section>
<footer>
</footer>
<!-- JS -->
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-56722015-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
Can somebody in gods name tell me whats wrong here? 
Thanks