afish674 Posted December 5, 2011 Share Posted December 5, 2011 Hi, I'm having problems with pathing using the @FontFace rule. I have created a folder structure for my site in Dreamweaver as shown below: I have created a Dreamweaver template from page_layout.html which is in the root folder and applied it to all my other pages. The fontface rule is defined in the main_styles.css file under "assets" as follows: @font-face { font-family: 'Shortcut'; src: url('../fonts/shortcut-webfont.eot'); src: url('../fonts/shortcut-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/shortcut-webfont.woff') format('woff'), url('../fonts/shortcut-webfont.ttf') format('truetype'), url('../fonts/shortcut-webfont.svg#ShortcutRegular') format('svg'); font-weight: normal; font-style: normal;} This works fine for any files in the root folder but with any pages in subfolders the link breaks. I don't understand this because this link is relative to the CSS file. Which doesn't move. So it shouldn't matter where the HTML file is because its pointing to the same location for the CSS file. All the other styling rules work okay! Could someone please explain how to fix this so it works in all my subfolders, and explain why it doesn't work currently? Thanks in advance for your help! Anthony Link to comment Share on other sites More sharing options...
afish674 Posted December 5, 2011 Author Share Posted December 5, 2011 Also, I apologise I meant to post this in the CSS forum. Link to comment Share on other sites More sharing options...
thescientist Posted December 5, 2011 Share Posted December 5, 2011 It might be pointing to the same CSS file, but the CSS files location relative to the HTML file calling it will be different if that HTML file is in the root or a subdirectory. In the root, the path to the CSS file ispage_layout.html assets/css/main_style.css for, say bands/index.html, the path to the same file would have to be this ../assets/css/main_style.css basically, for every subdirectory you go down, you have to use ../ to climb back up one to get to the root level so you can go down into the assets/css folder Link to comment Share on other sites More sharing options...
afish674 Posted December 7, 2011 Author Share Posted December 7, 2011 Hey thanks for your reply. I found that the path I used was correct BUT it only works if you land on the home page first and then navigate to the other pages for some reason. If you preview for example the /bands/index.html without having first viewed the root page index.html then the font doesn't load. I'm not quite sure why this happens, but it seems to be working okay now :S. Link to comment Share on other sites More sharing options...
thescientist Posted December 7, 2011 Share Posted December 7, 2011 I suppose that's all well and good if everybody always goes through that process, which might happen most of the time, but can you guarantee it would happen 100% of the time? Link to comment Share on other sites More sharing options...
afish674 Posted December 12, 2011 Author Share Posted December 12, 2011 No, I can't. But using the other paths you suggested don't work at all. Although I agree they should do logically. I don't really understand. Since its not on a web server at the moment I can't tell if its an issue thats only going to be a problem locally. The working path that i'm using is relative to the CSS document and not the HTML document which is why I don't understand why it only works on the home page, or after visiting the home page first. It should just work on all of the pages! Link to comment Share on other sites More sharing options...
thescientist Posted December 12, 2011 Share Posted December 12, 2011 the are two issues at stake here. One is that sense you are using a template system, the path to the CSS from the home page is correct, but it is not the same from any other files nested in deeper directories, as I explained. The other issue is caching, which is why it seems to "work" when the user has been to the home page first. The CSS will be cached and thus the browser will have those styles in memory already, so you are probably just getting lucky there. Again, the issue, which you don't seem to be getting, is NOT the path to the font-face files from the CSS. It is the path to the CSS FROM the HTML files. You are trying to re-use one path to the CSS from ALL your HTML files, but the HTML files are not located in the same directory, so that won't work. You would just want to create a path for the higher level index.html and then another path for everything the next subdirectory down, and so on if the nesting goes deeper. Link to comment Share on other sites More sharing options...
afish674 Posted December 23, 2011 Author Share Posted December 23, 2011 Thanks for your help with this. I now understand the principles. I felt I should update this thread because when I moved the site onto a web server then everything worked fine. It was an only an issue in testing. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.