I'm whipping up a website, and I cannot for the life of me figure out why my custom font won't show up.
Here is my HTML :
CODE
<! DOCTYPE html>
<head>
<link rel='stylesheet' type="text/css" href="stylesheet.css">
</head>
<body>
<table id="navigation">
<thead></thead>
<tbody>
<tr id="navhover">
<td><ul id="menu">
<li><a href="http://baptistevincent.weebly.com/home">home</a></li>
<li><a href="http://baptistevincent.weebly.com/portfolio">portfolio</a></li>
<li><a href="http://baptistevincent.weebly.com/about">about</a></li>
<li><a href="http://baptistevincent.weebly.com/contact">contact</a></li>
</ul></td>
</tr>
</tbody>
</table>
<h1>Baptiste Vincent</h1>
</body>
</html>
<head>
<link rel='stylesheet' type="text/css" href="stylesheet.css">
</head>
<body>
<table id="navigation">
<thead></thead>
<tbody>
<tr id="navhover">
<td><ul id="menu">
<li><a href="http://baptistevincent.weebly.com/home">home</a></li>
<li><a href="http://baptistevincent.weebly.com/portfolio">portfolio</a></li>
<li><a href="http://baptistevincent.weebly.com/about">about</a></li>
<li><a href="http://baptistevincent.weebly.com/contact">contact</a></li>
</ul></td>
</tr>
</tbody>
</table>
<h1>Baptiste Vincent</h1>
</body>
</html>
And here is my CSS :
CODE
@font-face {
font-family: 'dubielplainregular';
src: url('Dubiel-webfont.eot');
src: url('Dubiel-webfont.eot?#iefix') format('embedded-opentype'),
url('Dubiel-webfont.woff') format('woff'),
url('Dubiel-webfont.ttf') format('truetype'),
url('Dubiel-webfont.svg#dubielplainregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'dubielitalic';
src: url('DubielItalic-webfont.eot');
src: url('DubielItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('DubielItalic-webfont.woff') format('woff'),
url('DubielItalic-webfont.ttf') format('truetype'),
url('DubielItalic-webfont.svg#dubielitalic') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'dubielplainregular';
text-align: center;
font-size: 120px;
font-weight: normal;
padding: 0px;
margin: 0px;
}
#navigation {
width: 100%;
}
#navhover a:hover {
border-bottom:1px solid black;
}
#menu {
padding: 0;
text-align: right;
}
#menu li {
display: inline;
}
#menu li a {
background-color: #ffffff;
color: #000000;
font-family: arial;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
}
font-family: 'dubielplainregular';
src: url('Dubiel-webfont.eot');
src: url('Dubiel-webfont.eot?#iefix') format('embedded-opentype'),
url('Dubiel-webfont.woff') format('woff'),
url('Dubiel-webfont.ttf') format('truetype'),
url('Dubiel-webfont.svg#dubielplainregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'dubielitalic';
src: url('DubielItalic-webfont.eot');
src: url('DubielItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('DubielItalic-webfont.woff') format('woff'),
url('DubielItalic-webfont.ttf') format('truetype'),
url('DubielItalic-webfont.svg#dubielitalic') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'dubielplainregular';
text-align: center;
font-size: 120px;
font-weight: normal;
padding: 0px;
margin: 0px;
}
#navigation {
width: 100%;
}
#navhover a:hover {
border-bottom:1px solid black;
}
#menu {
padding: 0;
text-align: right;
}
#menu li {
display: inline;
}
#menu li a {
background-color: #ffffff;
color: #000000;
font-family: arial;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
}
I dont understand why h1 isn't showing as dubiel ? I can't see anything wrong with the code !
Thanks for your help x