Despite reading through all the relevant answers on various platforms, I am still unable to display my fonts properly. I have checked the paths, ensured that the files are in the correct location, and even tested a font squirrel example, but to no avail.
Everything else on my PC seems to be functioning correctly - paths, images, links, etc. Everything in my CSS file appears to be in order:
body {
background: url('mcontentback.jpg') repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
margin:0;
padding:0;
border:0;
width:100%;
height:100%;
min-width:497px;
text-align:center;
}
@font-face {
font-family: 'bahamasregular';
src: url('../fonts/bahamas-webfont.eot');
src: url('../fonts/bahamas-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/bahamas-webfont.woff') format('woff'),
url('../fonts/bahamas-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-size:100%;
}
@font-face {
font-family: 'bahamaslightregular';
src: url('../fonts/bahamaslight-webfont.eot');
src: url('../fonts/bahamaslight-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/bahamaslight-webfont.woff') format('woff'),
url('../fonts/bahamaslight-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-size:100%;
}
a {
color:#369;
}
a:hover {
color:#000;
background:#369;
text-decoration:underline;
}
h1,
h2,
h3 {
color:#000;
margin:.8em 0 .2em 0;
padding:0;
font-family: bahamasregular;
}
p {
color:#000;
margin:.4em 0 .8em 0;
padding:0;
font-family: bahamaslightregular;
}
.colmask {
position:relative;
clear:both;
float:left;
width:100%;
overflow:hidden;
}
.col1 {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
.fullpage {
min-height:1200px;
}
.fullpage .col1 {
width:96%;
left:2%;
}
img {
max-width:100%;
}
And here is my HTML5 code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB"><head>
<title>Blaa blaa</title><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8">
<meta name="description" content="Blaa blaa">
<meta name="keywords" content="Blaa blaa">
<meta name="robots" content="index, follow">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="../resourses/css/mcontent.css" media="screen"></head>
<body onload="parent.resizeIframe(document.body.scrollHeight)">
<div class="colmask fullpage">
<div class="col1">
<h1>Blaa blaa!</h1>
<p>Blaa blaa foo blah bla.</p>
<p>Blaa blaa foo blah bla!</p>
</div>
</div>
</body>
</html>
Despite all my efforts, I can't seem to figure out what I am doing wrong. I have tested this on IE 11, Firefox 28, and Comodo Dragon on Windows 7. Any insights would be greatly appreciated.