[Résolu] J'ai perdu ma font en déplaçant une page

Bonjour,

je travaille sur un petit projet perso tout codé main, j'ai réorganisé l'arborescence des fichiers pour obtenir les url que je souhaite au final, de cette manière

root/pages-générales.html
root/réalisations/pages-réalisations.html
root/images/images organisées dans des dossiers
root/js/tout-ce-qui-touche-à-javascript-ici.js
root/css/feuille-de-style.css
root/css/font/ma-font-trop-belle.ttf

au départ, toutes les pages étaient à la racine, et je viens juste de déplacer les pages réalisations dans leur dossier, en refaisant les liens relatifs des images, des css et des js.

mon seul souci est que j'ai perdu ma jolie font, appelée avec @fontface dans le css, et uniquement pour les pages déplacées dans le dossier réalsations.

je ne comprends pas vraiment, puisque la font est dans un sous-dossier de css, et est appelée ainsi :

@font-face {
    font-family: 'OpenSans';
    src: url('font/opensans-Regular-webfont.eot');
    src: url('font/opensans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/opensans-Regular-webfont.woff') format('woff'),
         url('font/opensans-Regular-webfont.ttf') format('truetype'),
         url('font/opensans-Regular-webfont.svg#OpenSans') format('svg');
    font-weight:normal;
    font-style: normal;
}

pouvez vous m'aider?
merci de vos réponses et bonne journée
Modifié par Claire39 (10 Sep 2014 - 12:40)

Bonjour,

Tu as juste "perdu" le font-face ou l'ensemble du (d'un) fichier css ? (Un link vers le css dans le html qui aurait sauté ?)

Selon ce que tu décris ça m'a l'air correct...

Bonjour Laurent,

j'ai perdu l'affichage de ma font sur le site, et aucune autre mise en forme / image générée par css.

en gros, avec un body

font-family: "OpenSans","Courier New", Courier, monospace;

la page complète est écrite en Courier New au lieu d'Open Sans.

la déclaration @fontface est au début de mon fichier css général

C'est vraiment bizarre qu'il n'y ai que ça qui saute sur tout le css et que pour les pages dans le dossier "realisation"... Le site n'est pas encore en ligne j'imagine, c'est en local pour le moment ?

bien sûr!

je viens également de constater que seul FireFox perd la font... ?
donc aucun soucis avec Chrome, Opera, Safari (desktop), et IE

Un problème de cache non vidé sur FF ?

Sinon, tentes avec un path absolu ou relatif mais depuis la root

Firebug me glisse à l'oreille que la font n'est pas comprise
(les typos lues sont en bleu, les typos non lues sont en gris)

j'ai tenté de déplacer le dossier du projet, sans pour l'instant chercher à créer un chemin absolu, car le but est que le projet fonctionne aussi bien en ligne que sur une clé usb,

sur une clé usb, pour tester sur différents ordinateurs, -> pas mieux
dans un répertoire Xampp -> ça marche

J'ai testé et... je reproduit exactement ton bug
FF n'aime pas les url de font-face dans un html qui est dans un sous dossier... vraiment bizarre... doit y avoir un soucis de path interprété je ne sais où par FF...

Fix rapide tu l'auras deviné : pas de sous dossier

... ou reproduire le css + font dans un dossier spécial pour mon répertoire grrrr
c'est un peu bête quand même, d'alourdir pour rien le dossier complet
merci d'avoir pris quelques minutes pour m'aider et bonne journée

c'est fou mais... c'est un paramétrage de Firefox à régler!

je donne la manip pour tous les pauvres inté qui se casseront la tête un jour pour rien comme moi (et comme Laurent):

dans FireFox, dans la barre d'url, taper about:config
trouver dans la liste la propriété security.fileuri.origin_policy
double cliquer dessus : le paramètre true passe à false
recharger Firefox

l'explication? elle se trouve ici :
http://kb.mozillazine.org/Security.fileuri.strict_origin_policy
et ici
http://kb.mozillazine.org/Editing_configuration (ça c'est la manip que je viens de vous donner)

En local, Firefox considère qu'il n'est pas obligé de suivre les chemins relatifs des dossiers, surtout quand il s'agit de remonter puis redescendre dans l'arborescence des fichiers, problème d'identifier le dossier root si j'ai tout bien compris.
Ce n'est pas le cas quand on est en ligne, ce qui explique que quand j'ai testé en local sous Xampp, FF m'a tout bien fait nikel
En changeant le paramètre dans la configuration du navigateur, on lui dit de bien suivre les chemins relatifs à ce feugnant de panda!

Bref, la joie quotidienne de travailler avec de multiples devices, navigateurs, configurations... pour le dev front

Super ! Bien joué !
Par contre vu que c'est une modif à faire dans les settings de FF ça n'arrange pas ton problème si ça doit marcher sur une clé sur n'importe quel PC...

J'ai suivi de loin votre étude de cas, et c'est bon à savoir ce problème et cette manip'.

_laurent a écrit :
Super ! Bien joué !
Par contre vu que c'est une modif à faire dans les settings de FF ça n'arrange pas ton problème si ça doit marcher sur une clé sur n'importe quel PC...

Il faudra juste préciser de ne PAS utiliser FF !

Pour le coup, j'ai la maîtrise des pc en question, donc je pourrais quand même y faire quelque chose.
Mais je pense que ce paramètre un peu foireux de Firefox doit être pris en compte lorsqu'on conçoit un projet destiné à tourner en local, pour une présentation commerciale comme c'est le cas pour moi.