Properly link font-face in theme css

[Vlinder Design]

hi,

I've got a question about using font-face in a theme's css. On Bahia Arabians, I'm trying to implement some font-face. But it doesn't seem to work.

Is it even possible to add some font-face to the CMS? I've used this code:

Code:

@font-face {
    font-family: book_antiquaregular;
    src: url(../fonts/566-webfont.eot);
    src: url(../fonts/566-webfont.eot?#iefix) format(embedded-opentype),
         url(../fonts/566-webfont.woff) format(woff),
         url(../fonts/566-webfont.ttf) format(truetype),
         url(../fonts/566-webfont.svg#book_antiquaregular) format(svg);
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: book_antiquabold;
    src: url(../fonts/567-webfont.eot);
    src: url(../fonts/567-webfont.eot?#iefix) format(embedded-opentype),
         url(../fonts/567-webfont.woff) format(woff),
         url(../fonts/567-webfont.ttf) format(truetype),
         url(../fonts/567-webfont.svg#book_antiquabold) format(svg);
    font-weight: normal;
    font-style: normal;

}

to call upon the font-face. The fonts are located in: theme >> minimalism >> fonts

The reason why I used this path, is because the CSS is also getting images out of: theme >> minimalism >> images, so I thought this would work to.

Thanks in advance!

[yojoe]

Why you even ask, when @font-face works as supposed ?
It's just didn't notice how book antiqua looks like ;}

[hameau]

to call upon the font-face. The fonts are located in: theme >> minimalism >> fonts

URL for the fonts is wrong – you must use a URL relative to the .css file, which is theme/minimalism/css/styles.css.

I think you need

Code:

src: url(../../fonts/566-webfont.eot);

[Vlinder Design]

Why you even ask, when @font-face works as supposed ?
It's just didn't notice how book antiqua looks like ;}

Well, the font you see, isn't Book Antiqua at all. It looks like it, but it's not the same. I already tried to replace the regular version with the bold version, just to see if anything would change, but it still staid the same. So that's why I was wondering what I was doing wrong.

[Vlinder Design]

to call upon the font-face. The fonts are located in: theme >> minimalism >> fonts

URL for the fonts is wrong – you must use a URL relative to the .css file, which is theme/minimalism/css/styles.css.

I think you need

Code:

src: url(../../fonts/566-webfont.eot);

Nope, that doesn't work either. I saw in the pre-defined code from the CMS itself, it used this path to locate images

Code:

    background-image: url(../images/bg.jpg);

. This does work, so I thought just to include this same path, but direct it to an other folder 'fonts'.

But is seems not to work. Like I said, I tried to change the appearances of the font by changing it to the bold version, but nothing changes.

My code I'm am currently using:

Code:

@font-face {
    font-family: book_antiquaregular;
    src: url(../fonts/566-webfont.eot);
    src: url(../fonts/566-webfont.eot?#iefix) format(embedded-opentype),
         url(../fonts/566-webfont.woff) format(woff),
         url(../fonts/566-webfont.ttf) format(truetype),
         url(../fonts/566-webfont.svg#book_antiquaregular) format(svg);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: book_antiquabold;
    src: url(../fonts/567-webfont.eot);
    src: url(../fonts/567-webfont.eot?#iefix) format(embedded-opentype),
         url(../fonts/567-webfont.woff) format(woff),
         url(../fonts/567-webfont.ttf) format(truetype),
         url(../fonts/567-webfont.svg#book_antiquabold) format(svg);
    font-weight: normal;
    font-style: normal;
}

The code I use to 'call' the font:

Code:

h3 {
    font-size: 18px;
    line-height: 0.9;
    color: #B60050;
    text-align: left;
    margin-bottom: 6px;
    padding-bottom: 5px;
    text-transform: uppercase;
        font-family: book_antiquaregular;
}

Perhaps it has something to do with the quotes of the links? When I open the CSS of the font-face in Dreamweaver, you can see the code has some '' used.

Code:

@font-face {
    font-family: 'book_antiquabold';
    src: url('567-webfont.eot');
    src: url('567-webfont.eot?#iefix') format('embedded-opentype'),
         url('567-webfont.woff') format('woff'),
         url('567-webfont.ttf') format('truetype'),
         url('567-webfont.svg#book_antiquabold') format('svg');
    font-weight: normal;
    font-style: normal;

Problem in the CMS is, though, that when I just 'copy+paste' this into the CMS CSS, links turn red and when I save this, my whole page design crashes

[yojoe]

Well, the font you see, isn't Book Antiqua at all. It looks like it, but it's not the same. I already tried to replace the regular version with the bold version, just to see if anything would change, but it still staid the same. So that's why I was wondering what I was doing wrong.

Are you 100% sure, that font files you are trying to embed are named with a 566-webfont pattern, and are really placed in theme/minimalism/fonts/ directory ?

[Vlinder Design]

Well, the font you see, isn't Book Antiqua at all. It looks like it, but it's not the same. I already tried to replace the regular version with the bold version, just to see if anything would change, but it still staid the same. So that's why I was wondering what I was doing wrong.

Are you 100% sure, that font files you are trying to embed are named with a 566-webfont pattern, and are really placed in theme/minimalism/fonts/ directory ?

I added an picture of my map structure, so you can see. Perhaps I missed something:

   

I already used this font-face in the FTP-version of this website Bahia Arabians, and there it's working like a charm.

[yojoe]

Windows hosting doesn't utilise " / " in paths <_<
(that's not a production environment)

[Vlinder Design]

Windows hosting doesn't utilise " / " in paths <_<
(that's not a production environment)

So you say, the "/" in my path doesn't work? Well, that doesn't make sence... The images in my code are also called with

Code:

background: URL (../images/bg.jpg);

and that works like a charm.

I think I just switch to Google Fonts... This isn't working like I wanted...

[shawn_a]

Learn how to use web debug tools, they tell you exactly what the paths are trying to load and why they are
failing.

It clearly says
Uncaught TypeError: Object #<Object> has no method 'prettyPhoto' bahiaarabians.vlinder-design.nl/:199
Failed to load resource: the server responded with a status of 404 (Not Found) http://bahiaarabians.vlinder-design.nl/theme/minimalism/fonts/567-webfont.woff
Failed to load resource: the server responded with a status of 404 (Not Found) http://bahiaarabians.vlinder-design.nl/theme/minimalism/fonts/567-webfont.ttf
Failed to load resource: the server responded with a status of 404 (Not Found) http://bahiaarabians.vlinder-design.nl/theme/minimalism/fonts/567-webfont.svg#book_antiquabold
Uncaught TypeError: Object #<Object> has no method 'prettyPhoto' bahiaarabians.vlinder-design.nl/:199

on your website.
so no those files are NOT there.

[Vlinder Design]

Learn how to use web debug tools, they tell you exactly what the paths are trying to load and why they are
failing.

It clearly says
Uncaught TypeError: Object #<Object> has no method 'prettyPhoto' bahiaarabians.vlinder-design.nl/:199
Failed to load resource: the server responded with a status of 404 (Not Found) http://bahiaarabians.vlinder-design.nl/theme/minimalism/fonts/567-webfont.woff
Failed to load resource: the server responded with a status of 404 (Not Found) http://bahiaarabians.vlinder-design.nl/theme/minimalism/fonts/567-webfont.ttf
Failed to load resource: the server responded with a status of 404 (Not Found) http://bahiaarabians.vlinder-design.nl/theme/minimalism/fonts/567-webfont.svg#book_antiquabold
Uncaught TypeError: Object #<Object> has no method 'prettyPhoto' bahiaarabians.vlinder-design.nl/:199

on your website.
so no those files are NOT there.

I'm not used work with debug tools, only with Firebug. I'm a designer not a developer I will check my files on my server, perhaps located in a wrong map. Thnx for the heads up, anyway.