Problema con rutas relativas

[Joseph]

Buenas noches, tengo un buen rato revisando un problema con unas rutas relativas en local host, las cuales me funcionan bien en el servidor remoto.

El problema es el siguiente:

Tengo un pack de fuentes de íconos (Icon Webfonts pack), el cual funciona perfectamente como lo descargo de la web, casi todos (He probado varios) tienen un sistema de archivo similiar al siguiente:

- css (Directorio)
-- archivo.css
- fonts (Directorio)
-- archivo.ttf
-- archivo.svg
-- archivo.png
-- archivo.eot
-- archivo.woff
index.html


el problema se genera cuando cambio los archivos para adptarlos a mi sistema de archivos:

-> static (Directorio)
--> css (subdirectorio de static)
---> archivo.css (Archivo del subdirectorio css)
-->Fonts (Subdirectorio de static)
--->archivo.ttf (Archivo del subdirectorio Fonts)
---> archivo.svg (Archivo del subdirectorio Fonts)
---> archivo.png (Archivo del subdirectorio Fonts)
---> archivo.eot (Archivo del subdirectorio Fonts)
---> archivo.woff (Archivo del subdirectorio Fonts)

-> templates (Directorio)
--> index.html (Archivo del directorio templates)

en el archivo index.html coloco el enlace al archivo.css que está dentro del directorio static

<link rel="stylesheet" type="text/css" href="../static/css/archivo.css">

y en el archivo archivo.css coloco el enlace a las fuente que están dentro del directorio fonts

@font-face {
font-family: 'typicons';
src: url('../css/archivo.eot');
src: url('archivo.eot?#iefix') format('embedded-opentype'),
url('archivo.woff') format('woff'),
url('archivo.ttf') format('truetype'),
url('archivo.svg#typicons') format('svg');
font-weight: normal;
font-style: normal;
}
/* :before psuedo-selector inserts and styles icon */
.typcn:before {
font-family: 'typicons';
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
height: 1em;
font-size: 1em;
text-align: center;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}

/* Code for individual icons */
.typcn-adjust-brightness:before { content: '\e000'; } /* '' */
.typcn-adjust-contrast:before { content: '\e001'; } /* '' */
.typcn-anchor-outline:before { content: '\e002'; } /* '' */
.typcn-anchor:before { content: '\e003'; } /* '' */
.typcn-archive:before { content: '\e004'; } /* '' */
.typcn-arrow-back-outline:before { content: '\e005'; } /* '' */
.typcn-arrow-back:before { content: '\e006'; } /* '' */
.typcn-arrow-down-outline:before { content: '\e007'; } /* '' */
.typcn-arrow-down-thick:before { content: '\e008'; } /* '' */
.typcn-arrow-down:before { content: '\e009'; } /* '' */


Creo que el problema es cuando coloco un directorio detrás (../directorio/archivo.css), porque cuando está en el mismo directorio o en un subdirectorio dentro del actual directorio (archivo.css) ó (directorio/archivo.css) funciona bien.