Soit ces arborescences dans l’absolus.

/home/xfree86/model/html
/home/xfree86/model/css
/home/xfree86/model/fonts
/home/xfree86/model/images

Le fichier html est à cette place.

/home/xfree86/model/index.html

Le fichier css est à cette place.

/home/xfree86/model/css/styles.css

Le fichier css des fontes à cette place.

/home/xfree86/model/fonts/fonts.css

La déclaration dans le fichier html.

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/fonts.css">

Le fichier styles.css

body{
background:url(../images/uneimage.jpg);
}

Le fichier fonts.css

@font-face {
  font-family: "FontAwesome";
  	src:url(fontawesome-webfont.eot) format("eot"), 
		url(FontAwesome.otf) format("otf"), 
		url(fontawesome-webfont.ttf) format("truetype"), 
		url(fontawesome-webfont.woff) format("woff"), 
		url(fontawesome-webfont.woff2) format("woff2"), 
		url(fontawesome-webfont.svg) format("svg");
}

body, button {
  font-family: "FontAwesome";
}

Dans le navigateur en ouvrant le fichier.

J’ai l’image de fond et la police qui s’affiche.

Je place le fichier html dans le répertoire html

/home/xfree86/model/html/index.html

 Je change les déclarations "link".

de

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/fonts.css">

à

<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../fonts/fonts.css">

L’image de fond qui s’affiche, mais pas la police.

La question, c’est pourquoi cela fonctionne de cette façon et comment déclaré un chemin relatif avec font@face.

Bonjour , 

Etrange comme situation , vous avez essayé de vider le cache en rafraîchissant la page ?

( Ctrl + F5 )

Oui, bien sur , j'ai même testé des "local" à la place des "url", même résulta.

  il y a un truc avec le mécanisme @font-face, Mais je ne trouve pas la doc.