I've been at this all week, trying to put the finishing touches on my site and I just can't seem to get font face to to work.
Here's what I'm working with-
/* Reset */
html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, code, img,
small, strong, dl, dt, dd, ol, ul, li
fieldset, form, label {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
body {
background: url(img/background.png) repeat;
font-family: Georgia,
Constantia,
"Lucida Bright",
"Bitstream Vera Serif",
"Liberation Serif",
serif;
line-height: 1.5;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWJlYmViIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(235,235,235,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(235,235,235,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(235,235,235,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(235,235,235,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(235,235,235,1) 100%); /* IE10+ */
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(235,235,235,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ebebeb',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}
ol, ul {
list-style-type: none;
}
@font-face {
font-family: 'DalleRegular';
src: url('type/dalle_typeface-webfont.eot');
src: url('type/dalle_typeface-webfont.eot?#iefix') format('embedded-opentype'),
url('type/dalle_typeface-webfont.woff') format('woff'),
url('type/dalle_typeface-webfont.ttf') format('truetype'),
url('type/dalle_typeface-webfont.svg#') format('svg');
font-weight: normal;
font-style: normal;
}
/* End Reset */
h1 {
font-family: 'DalleRegular';
font-size: 160%;
font-weight: normal;
letter-spacing: 2px;
text-transform: uppercase;
-webkit-text-shadow:1px 1px 1px #cdcdcd; /* for chrome */
-moz-text-shadow:1px 1px 1px #cdcdcd; /* for firefox */
-o-text-shadow:1px 1px 1px #cdcdcd; /* for opera */
-ms-text-shadow:1px 1px 1px #cdcdcd; /* for ie 9+ */
-khtml-text-shadow:1px 1px 1px #cdcdcd; /* for gecko based browser*/
text-shadow:1px 1px 1px #cdcdcd;; /* for all browser*/
}
h2 {
font-size: 70%;
font-weight: normal;
}
h3 {
font-size: 70%;
font-weight: bold;
}
h4 {
font-size: 70%;
font-weight: normal;
}
p {
font-size: 100%;
}
a {
color: #202020;
font-size: 100%;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Main Styles */
header {
background: none;
float: left;
margin-top: 123px;
margin-left: 22px;
position: fixed;
width: 158px;
}
#main {
float: left;
margin-left: 315px;
margin-top: 310px;
}
#portfolio {
float: left;
margin-left: 315px;
margin-top: 310px;
}
#contact-form {
float: left;
margin-left: 315px;
margin-top: 310px;
}
#sidebar {
border-top: 1px solid #202020;
margin-top: 295px;
margin-left: 1084px;
padding-top: 25px;
position: fixed;
width: 158px;
}
.postinfo {
font-size: 70%;
font-weight: normal;
}
.shadow {
-moz-box-shadow: 1px 1px 1px 1px #cdcdcd;
-webkit-box-shadow: 1px 1px 1px 1px #cdcdcd;
box-shadow: 1px 1px 1px 1px #cdcdcd;
}
/* Header */
header logo {
margin-top: ;
}
header nav {
border-top: 1px solid #202020;
margin-top: 25px;
width: 158px;
padding-top:25px;
}
header nav ul li {
font-family: 'DalleRegular';
font-size: 160%;
letter-spacing: 2px;
padding-left: 55px;
margin-top: -10px;
-webkit-text-shadow:1px 1px 1px #cdcdcd; /* for chrome */
-moz-text-shadow:1px 1px 1px #cdcdcd; /* for firefox */
-o-text-shadow:1px 1px 1px #cdcdcd; /* for opera */
-ms-text-shadow:1px 1px 1px #cdcdcd; /* for ie 9+ */
-khtml-text-shadow:1px 1px 1px #cdcdcd; /* for gecko based browser*/
text-shadow:1px 1px 1px #cdcdcd;; /* for all browser*/
}
/* Sidebar */
#sidebar #dictionary {
position: fixed;
margin-top: -8px;
width: inherit;
}
#sidebar #twitter {
list-style-type: none;
margin-top: 70px;
position: fixed;
width: inherit;
}
/* Main */
#main article .postinfo {
list-style-type: none;
margin-left: ;
width: 150px;
}
#main article p {
float: right;
margin-top: -85px;
margin-left: 230px;
padding-left: ;
width: 403px;
}
/* Work */
#portfolio #catergory ul {
font-family: 'DalleRegular';
font-size: 160%;
letter-spacing: 2px;
padding-left: 55px;
margin-top: -10px;
}
#portfolio #category ul .portfolio-item {
float: right;
margin-top: -80px;
margin-left: 160px;
padding-top: 50px;
width: 433px;
}
#portfolio #category ul .portfolio-item a {
padding-right: 10px;
}
/* Contact */
#invite .postinfo {
list-style-type: none;
width: 150px;
}
form {
margin-top: -73px;
}
label {
font-family: 'DalleRegular';
font-size: 160%;
font-weight: normal;
letter-spacing: 2px;
text-transform: uppercase;
float: left;
margin-left: 200px;
vertical-align: top;
-webkit-text-shadow:1px 1px 1px #cdcdcd; /* for chrome */
-moz-text-shadow:1px 1px 1px #cdcdcd; /* for firefox */
-o-text-shadow:1px 1px 1px #cdcdcd; /* for opera */
-ms-text-shadow:1px 1px 1px #cdcdcd; /* for ie 9+ */
-khtml-text-shadow:1px 1px 1px #cdcdcd; /* for gecko based browser*/
text-shadow:1px 1px 1px #cdcdcd;; /* for all browser*/
}
input {
font-family: Georgia,
Constantia,
"Lucida Bright",
"Bitstream Vera Serif",
"Liberation Serif",
serif;
font-size: 70%;
float: right;
border-style: 1px solid #202020;;
height: 13px;
letter-spacing: 1px;
margin-left: 10px;
margin-top: 7px;
width: 265px;
}
textarea {
border-style: 1px solid #202020;
margin-left: 2px;
margin-top: 7px;
width: 270px;
height: 150px;
}
#submitbutton {
background: none;
border-style: none;
float: left;
font-family: Georgia,
Constantia,
"Lucida Bright",
"Bitstream Vera Serif",
"Liberation Serif",
serif;
margin-left: 167px;
margin-top: 5px;
padding-bottom: 50px;
}
br {
clear: left;
}
The file directory is as follows- Site > img folder, type folder, index.php, screenshot.png, style.css
I'm really excited to be so close to finishing this site, so any and all assistance is greatly appreciated.
edit
Put through the w3c css validator, these are the errors I get with respect to @font-face: 51. Value Error : font-family Property font-family doesn't exist in CSS level 2.1 but exists in [css1, css2, css3] : 'DalleRegular'
Property src doesn't exist : url('type/dalle_typeface-webfont.eot')
Property src doesn't exist : url('type/dalle_typeface-webfont.eot?#iefix') format('embedded-opentype' ),url('type/dalle_typeface-webfont.woff') format('woff' ),url('type/dalle_typeface-webfont.ttf') format('truetype' ),url('type/dalle_typeface-webfont.svg#') format('svg' )
Value Error : font-weight Property font-weight doesn't exist in CSS level 2.1 but exists in [css1, css2, css3] : normal
Value Error : font-style Property font-style doesn't exist in CSS level 2.1 but exists in [css1, css2, css3] : normal
edit pt. 2 Upon examining my files a little more closely, I realized I placed my type folder within a type folder, necessitating a type/type/ path. Fixed that and all is well. Thank you everyone for your help.
Do you have the fonts in the type subfolder? Try to put a / at the beginning of the path. The path should be relative to the document (not the css file).