CODEWITHSUNDEEP
cssfont-face
AMC
AMC

Reputation: 1695

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

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'

  1. Property src doesn't exist : url('type/dalle_typeface-webfont.eot')

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

  3. Value Error : font-weight Property font-weight doesn't exist in CSS level 2.1 but exists in [css1, css2, css3] : normal

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

Upvotes: 2

Views: 4694

Answers (3)

NotJay
NotJay

Reputation: 4076

I have had the same issue on a few occasions and I always refer back to this page: Web fonts with @font-face. I ended up putting the full path of the font file in my css because of all the sub-directories.

Upvotes: 0

Frank van Wijk
Frank van Wijk

Reputation: 3262

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

Upvotes: 2

Zeta
Zeta

Reputation: 105955

Try 

@font-face {
    font-family: DalleRegular;
    /*... */
}

h1 {
    font-family: DalleRegular;
}

@font-face{font-family: 'DalleRegular';} will create a font-family called 'DalleRegular' including the single quotes. Use quotes only if you have characters that need to be encoded (e.g. whitespace and other non alphanumeric symbols).

See also:

Upvotes: 1

Related Questions