Properly link font-face in theme css - Printable Version +- GetSimple Support Forum (http://get-simple.info/forums) +-- Forum: GetSimple (http://get-simple.info/forums/forumdisplay.php?fid=3) +--- Forum: General Questions and Problems (http://get-simple.info/forums/forumdisplay.php?fid=16) +--- Thread: Properly link font-face in theme css (/showthread.php?tid=4794) |
Properly link font-face in theme css - Vlinder Design - 2013-05-27 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 { 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! RE: Properly link font-face in theme css - yojoe - 2013-05-27 Why you even ask, when @font-face works as supposed ? It's just didn't notice how book antiqua looks like ;} RE: Properly link font-face in theme css - hameau - 2013-05-28 (2013-05-27, 22:46:10)Vlinder Design Wrote: to call upon the font-face. The fonts are located in: theme >> minimalism >> fontsURL 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); RE: Properly link font-face in theme css - Vlinder Design - 2013-05-28 (2013-05-27, 23:57:32)yojoe Wrote: Why you even ask, when @font-face works as supposed ? 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. RE: Properly link font-face in theme css - Vlinder Design - 2013-05-28 (2013-05-28, 16:35:16)hameau Wrote:(2013-05-27, 22:46:10)Vlinder Design Wrote: to call upon the font-face. The fonts are located in: theme >> minimalism >> fontsURL for the fonts is wrong – you must use a URL relative to the .css file, which is theme/minimalism/css/styles.css. 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); 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 { The code I use to 'call' the font: Code: h3 { 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 { 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 RE: Properly link font-face in theme css - yojoe - 2013-05-28 (2013-05-28, 17:31:27)Vlinder Design Wrote: 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 ? RE: Properly link font-face in theme css - Vlinder Design - 2013-05-28 (2013-05-28, 19:30:24)yojoe Wrote:(2013-05-28, 17:31:27)Vlinder Design Wrote: 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. 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. RE: Properly link font-face in theme css - yojoe - 2013-05-29 Windows hosting doesn't utilise " / " in paths <_< (that's not a production environment) RE: Properly link font-face in theme css - Vlinder Design - 2013-05-29 (2013-05-29, 06:30:59)yojoe Wrote: Windows hosting doesn't utilise " / " in paths <_< 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); I think I just switch to Google Fonts... This isn't working like I wanted... RE: Properly link font-face in theme css - shawn_a - 2013-05-29 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. RE: Properly link font-face in theme css - Vlinder Design - 2013-05-29 (2013-05-29, 23:17:49)shawn_a Wrote: Learn how to use web debug tools, they tell you exactly what the paths are trying to load and why they are 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. |