font face troubles.. not sure why it won't work?

Question

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.

Is this live somewhere, and are you definitely pointing to the right place for your font files? If you look at the console in Chrome (hit F12 on Windows, then the right-most tab) are there any errors? — CherryFlavourPez
The CSS for the font-face looks fine, it must be a path issue. Are you sure you've got the right path? Remember they are relative to the document, not the root. — Kyle
You need to choose "Profile: CSS level 3" when you use the CSS validator. font-face isn't defined in CSS level 2.1. — Zeta
@KyleSevenoaks, could you elaborate? what do you mean by it must be relative to the document, not the root? — AMC
@Zeta, Thank you for the sugestion. Though, while the validation errors cleared, the issue persists. — AMC

Frank van Wijk Frank van Wijk · Accepted Answer · 2012-03-21T13:34:25

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).

font face troubles.. not sure why it won't work?

3 Answers