Fonts won't work from different folder? - html

Question

So I have a font folder and a css folder as a sibling, when I refer to the fonts it works only when the .html file is a sibling with the font folder, however it will use the styling css file correctly. Let me clear it up with this image:
I'm refering to global_style.css from every index.html, and get correct styling in every index.html but the fonts will only work with the one which is not in any sub folders...
I have this in my root/subfolder1/index.html
<link rel="stylesheet" type="text/css" href="css/global_style.css"/>
And this in every other index.html:
<link rel="stylesheet" type="text/css" href="../css/global_style.css"/>
I suppose it should be working.
Here is my global_style.css:
#font-face{
font-family:"SourceSans";
src: url('../fonts/SourceSansPro.otf');
font-weight: normal;
font-style: normal;
}
#font-face{
font-family:"SourceSansIt";
src: url('../fonts/SourceSansProIt.otf');
font-weight: normal;
font-style: normal;
}
#font-face{
font-family:"SourceSansB";
src: url('../fonts/SourceSansProB.otf');
font-weight: normal;
font-style: normal;
}
#font-face{
font-family:"AllerBld";
src: url('../fonts/Aller_Bd.ttf');
font-weight: normal;
font-style: normal;
}
body {
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale;
font-smooth: always;
font-family:"SourceSans";
font-size: 14px;
color:white;
}

Answer 1

You can always use absolute path to load the fonts:
#font-face{
font-family:"SourceSans";
src: url('http://www.yoursite.com/root/subfolder1/fonts/SourceSansPro.otf');
font-weight: normal;
font-style: normal;
}
#font-face{
font-family:"SourceSansIt";
src: url('http://www.yoursite.com/root/subfolder1/fonts/SourceSansProIt.otf');
font-weight: normal;
font-style: normal;
}
#font-face{
font-family:"SourceSansB";
src: url('http://www.yoursite.com/root/subfolder1/fonts/SourceSansProB.otf');
font-weight: normal;
font-style: normal;
}
#font-face{
font-family:"AllerBld";
src: url('http://www.yoursite.com/root/subfolder1/fonts/Aller_Bd.ttf');
font-weight: normal;
font-style: normal;
}
body {
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale;
font-smooth: always;
font-family:"SourceSans";
font-size: 14px;
color:white;
}