GetSimple Support Forum

Full Version: Properly link font-face in theme css
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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. Undecided

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! Big Grin
Why you even ask, when @font-face works as supposed ?
It's just didn't notice how book antiqua looks like ;}
(2013-05-27, 22:46:10)Vlinder Design Wrote: [ rel="nofollow" -> ]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);
(2013-05-27, 23:57:32)yojoe Wrote: [ rel="nofollow" -> ]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.
(2013-05-28, 16:35:16)hameau Wrote: [ rel="nofollow" -> ]
(2013-05-27, 22:46:10)Vlinder Design Wrote: [ rel="nofollow" -> ]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 Undecided
(2013-05-28, 17:31:27)Vlinder Design Wrote: [ rel="nofollow" -> ]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 ?
(2013-05-28, 19:30:24)yojoe Wrote: [ rel="nofollow" -> ]
(2013-05-28, 17:31:27)Vlinder Design Wrote: [ rel="nofollow" -> ]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:

[attachment=195]

I already used this font-face in the FTP-version of this website Bahia Arabians, and there it's working like a charm.
Windows hosting doesn't utilise " / " in paths <_<
(that's not a production environment)
(2013-05-29, 06:30:59)yojoe Wrote: [ rel="nofollow" -> ]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...
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/t...bfont.woff
Failed to load resource: the server responded with a status of 404 (Not Found) http://bahiaarabians.vlinder-design.nl/t...ebfont.ttf
Failed to load resource: the server responded with a status of 404 (Not Found) http://bahiaarabians.vlinder-design.nl/t...ntiquabold
Uncaught TypeError: Object #<Object> has no method 'prettyPhoto' bahiaarabians.vlinder-design.nl/:199

on your website.
so no those files are NOT there.
(2013-05-29, 23:17:49)shawn_a Wrote: [ rel="nofollow" -> ]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/t...bfont.woff
Failed to load resource: the server responded with a status of 404 (Not Found) http://bahiaarabians.vlinder-design.nl/t...ebfont.ttf
Failed to load resource: the server responded with a status of 404 (Not Found) http://bahiaarabians.vlinder-design.nl/t...ntiquabold
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 Smile I will check my files on my server, perhaps located in a wrong map. Thnx for the heads up, anyway.