Jump to content

@fontface Path Issues


Recommended Posts

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: fontface_pathing.jpg 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 post
Share on other sites

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

Edited by thescientist
Link to post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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!

Edited by afish674
Link to post
Share on other sites

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.

Edited by thescientist
Link to post
Share on other sites
  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...