@Fontface & FontSquirrel

Hello,

I am looking to implement a webkit from font squirrel on my website. This is a normal site (not a blog) with folders organized for each section and we are using coldfusion.

So the directory structure goes something like this:

(All of these listed below are root folders with files in them)
[LIST]
[] Folder 1
[
] Folder 2
[] Folder 3
[
] Fonts
[*] WebPages

[/LIST]
These are the folders within the webpages folder. The blue indicates files within those folders:

[INDENT]Folder1
[INDENT]File1.html[/INDENT]
Folder 2
Folder 3
Css

[INDENT]cssfile.css[/INDENT]
[/INDENT]

This is what my CSS looks like:


h1,h2,h3,h4 {margin:0;padding:0; font-family: 'SourceSansProSemiboldItalic';}

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

}

I have a relative link to my css on file1.html which I am using as a test.

This setup only seems to work only in IE. I have tried absolute links, root links and I simply cannot get it to work in any other browser. I also put the fonts folder in the css folder, changed the css and still nothing. The only time I got it to work in other browsers is by duplicating one of my pages and saving it in the same folder as the css folder. I cannot do that for each page on my site as they are already organized into folders. I can’t believe that this would only work if all of the html files were in one folder like they are when you extract your webkit file. I also read up on strict origin policies and trying an htaccess hack however I don’t think that our setup includes that file.

Would appreciate any help!

Thank you for your time.

Hi,

Do you have a live page for us to look at to see if everything is where you say it is.?

If you are running locally then you may have issues if you have the fonts in different directories depending on the origin policy.

You should use root relative paths to be sure that you locate the font-file no matter where the css file is kept.

The easiest solution though is to store the font css file (just the css for the fonts) in the same folder as the font files and as mentioned in the link below.

Here’s a video that will help with troubleshooting the problem.

Hi Paul,

Thank you for your response! Here is a screenshot of my folder directory structure (for testing purposes). What I realized was, even if I put everything in the same folder, link and structure the directories according to the way I have it now (picture 1), if the html file is not in the root (picture 2) it wont work no matter how its linked (absolute, root or relative). All of my pages are in their respective folders within the pages folder and its the way I need to keep it. Is there an exception? I know there is an htaccess hack however I cant use that since I am not on a linux/apache server. Is there an alternate for windows servers to get past the same origin deal? I thought I wouldn’t have to worry about this mainly because I am hosting everything in the same place.

Shot 1 (font webkit doesn’t work with this structure. nested directories with pages in their respective folders)

Shot2 (font webkit works with this structure. everything at the root including the page I want the fonts to show up on.)

Hi,

These font-face issue are always hard to debug :frowning:

Did you try the root relative paths to the font-files that I suggested (you’ll need to be online to try this out most likely) ?


 src: url('/fonts/SourceSansPro-SemiboldIt-webfont.eot');

If that doesn’t help then try some suggestions from these threads:

If that doesn’t work then you’ll have to supply a link to the site so we can see if the resources are being loaded.

I just uploaded a font test file with css html and fonts all in different folders and it works for me.

Hi Paul,

Was about to send the link but I had a look at all of your suggestions then tried the root relative path and it worked!!! I must have missed something the first few times (haha), and you’re right it doesn’t matter which folder anything is in just as long as the css is correct and the fonts are in the correct place. Again THANK YOU so much for your time and help, truly appreciated!