Police interne au site

**Kojoh** · 07/02/2026, 20h51

Bonjour, j'utilise un code PHP HTML CSS pour afficher un liste de police sur une page web; je voudrais que les texte affiche chaque police, mais cela reste la police par défaut, si quelqu'un pourrais me dire ce qui ne va pas ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<?php 
 
$directories = glob(getcwd()."{/*.OTF,/*.otf}",GLOB_BRACE);
foreach ($directories as $dir) 
{ 
$dir_2 = str_replace('/home/johokbq/www/FONTS_JHK/', '', $dir);
$dir_3 = str_replace('.otf', '', $dir_2);
         echo '<div style="font-family: \''.$dir_3.'\'; src: url(\''.$dir_2.'\') format(\'otf\'); font-display: auto; font-size:25px;">'.$dir_3.'</div><br>';
         echo '<input type="text" value="JOHOK LA BRANCHE TORDUE" style="font-family: \''.$dir_3.'\'; src: url(\''.$dir_2.'\'); font-display: auto; "/></input><br><br>';                
} 
  
?>

**NoSmoking** · 08/02/2026, 19h22

Bonjour,
il te faut passer par une règle @font-face en CSS qui permet d'intégrer des polices personnalisées.

Il te faudrait donc trouver dans ta page quelque chose comme :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
@font-face {
  font-family: NomDeLaPolice;
  src: url(fonts/nomdelapolice.otf);
}
.la-police {
  font-family: LaPolice
}

pour chaque police prise en compte.

Il te reste ensuite à affecter la classe la-police à l'élément ciblé.

**Kojoh** · 08/02/2026, 19h38

Merci beaucoup, j'ai donc ajouter le code suivant dans la balise style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
@font-face {
<?php 
$directories = glob(getcwd()."{/*.OTF,/*.otf}",GLOB_BRACE);
foreach ($directories as $dirt) 
{ 
$dirt_2 = str_replace('/home/johokbq/www/FONTS_JHK/', '', $dirt);
$dirt_3 = str_replace('.otf', '', $dirt_2);
         echo 'font-family:\''.$dirt_3.'\'; src: url(\''.$dirt_2.'\'); ';
} 
?>
}

Qui me gérée ceci :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
@font-face {
font-family:'JHK Batoun 25 V10'; src: url('JHK Batoun 25 V10.otf'); font-family:'JHK Kisteen 26 V10'; src: url('JHK Kisteen 26 V10.otf'); font-family:'Jhk 25 V10'; src: url('Jhk 25 V10.otf'); font-family:'Jhk Block 26 V10'; src: url('Jhk Block 26 V10.otf'); font-family:'Jhk Calligrafik 26 2 V10'; src: url('Jhk Calligrafik 26 2 V10.otf'); font-family:'Jhk Calligrafik 26 V10'; src: url('Jhk Calligrafik 26 V10.otf'); font-family:'Jhk Design 26 V10'; src: url('Jhk Design 26 V10.otf'); font-family:'Jhk Graff Segments 26 V10'; src: url('Jhk Graff Segments 26 V10.otf'); font-family:'Jhk Sholsen 26 V10'; src: url('Jhk Sholsen 26 V10.otf'); 
}

Mais ans résultat.

Je ne sais pas comment faire en un seul PHP donc difficile attribuer la classe.

**Kojoh** · 08/02/2026, 19h45

A moins de trouver une solution pour incrémenter le classe

Bien au finale, j'ai l'impression que ceci fonctionne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta charset="utf-8" />
 
 
<title>JOHOK Fonts JHK</title>
<META NAME="DESCRIPTION" CONTENT="Mes spolices d'&eacute;criture">
<meta name="keywords" content="">
 
<meta name="viewport" content="width=device-width,  minimum-scale=0.25,  minimum-scale=0.25" />
 
<style type="text/css">
<!--
img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
    max-width: 100%;
}
p {
  margin:12px;
}
body,td,th {
        color: #000000;
        }
body {
 
        background-color:#ffffff;
 
}
h1 { font-size: 5.9vw; }
h2 { font-size: 3.0vh; }
p { font-size: 2vmin; }
a:link {
        color: #ffffff;
        font-size: 22px;
        font-weight: bold;
        text-decoration: none;
}
a:visited {
        text-decoration: none;
        color: #ffffff;
}
a:hover {
        text-decoration: none;
        color: #FF0000;
}
a:active {
        text-decoration: none;
        color: #ffffff;
}
.l:link {
        color: #000000;
        font-weight: bold;
        text-decoration: none;
}
.l:visited {
        text-decoration: none;
        color: #000000;
}
.l:hover {
        text-decoration: none;
        color: #FF0000;
}
.l:active {
        text-decoration: none;
        color: #000000;
}
.Style4 {
     font-weight: bold;
     font-size: 35px;
}
.Style4b {
     font-weight: bold;
     font-size: 25px;
}
.nwesit {
     font-weight: bold;
     font-size: 40px;
}
 
input, select, textarea {
    font-size:45px;
        font-weight:bold;
    width: 90%;
        height:60px;
    padding: 8px 10px;
    color: #000000;
    border: 1px solid #444;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset rgba(0,0,0,0.35) 2px 2px 12px;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    transition: all 0.7s;
}
input:hover, select:hover, textarea:hover {
    font-size:25px;
        font-weight:bold;
    width: 90%;
        height:60px;
    border: 1px solid #000000;}
input:focus, select:focus, textarea:focus {
    font-size:25px;
        font-weight:bold;
    width: 90%;
        height:60px;
    color: #000000;
    border: 1px solid #000000;
    box-shadow: inset rgba(0,0,0,0.35) 2px 2px 12px, #000000 0 0 10px;
    outline: 0;
}
 
#apDiv1 {
        position: absolute;
        width: 47px;
        height: 69px;
        z-index: 1;
        left: 1163px;
        top: 104px;
        font-size: 120px;
        color: #8C8585;
}
 
 
<?php 
 
$directories = glob(getcwd()."{/*.OTF,/*.otf}",GLOB_BRACE);
 
foreach ($directories as $dirt) 
{ 
$dirt_2 = str_replace('/home/johokbq/www/FONTS_JHK/', '', $dirt);
$dirt_3 = str_replace('.otf', '', $dirt_2);
         echo '@font-face { font-family:\''.$dirt_3.'\'; src: url(\''.$dirt_2.'\'); } ';
                 echo '.JHKFONT';
                 echo '{font-family:\''.$dirt_3.'\';} ';
} 
 
?>
 
 
-->
</style>
 
<head>
 
</head>
 
<body>
 
<div  align="center">
 
<br><br><br>
 
 
 
<?php 
 
$directories = glob(getcwd()."{/*.OTF,/*.otf}",GLOB_BRACE);
foreach ($directories as $dir) 
{ 
$dir_2 = str_replace('/home/johokbq/www/FONTS_JHK/', '', $dir);
$dir_3 = str_replace('.otf', '', $dir_2);
         echo '<div style="font-family: \''.$dir_3.'\'; src: url(\''.$dir_2.'\') format(\'otf\'); font-display: auto; font-size:25px;">'.$dir_3.'</div><br>';
         echo '<input type="text" value="JOHOK LA BRANCHE TORDUE" style="font-family: \''.$dir_3.'\'; src: url(\''.$dir_2.'\'); font-display: auto; "/></input><br><br>';                
} 
  
?>
 
 
</div>
 
</body>
</html>

**NoSmoking** · 08/02/2026, 20h02

Il te faut écrire une @font-face par police

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
@font-face {
  font-family: 'JHK Batoun 25 V10';
  src: url('JHK Batoun 25 V10.otf');
}
@font-face {
  font-family: 'JHK Kisteen 26 V10';
  src: url('JHK Kisteen 26 V10.otf');
}
 /* etc ...*/

... et tu peux également, sans créer des classes, passer par du CSS inline, style="font-family:'JHK Batoun 25 V10'".
Ressource :

La règle @ CSS @font-face

**Kojoh** · 08/02/2026, 20h04

Merci encore, je viens de modifie mon précédent message.

**casperweb** · 08/02/2026, 20h06

Bonsoir, vous devez avoir une déclaration @font-face par police. En css si vous avez plusieurs propriétés dans la même règle c'est la dernière valeur de cette propriété qui est prise en compte.
Est-ce que les URL des fichiers sont corrects? Évitez les espaces et caractères spéciaux dans les noms des fichiers et leurs répertoire.

Est-ce qu'une class est définie dans le CSS avec la propriété font-family? Parce que seul le @font-face n'est pas suffisant. Cela ne fait que de définir une map entre le nom de la police et son fichier.

Enfin je me demande pour quelles raisons rendre cela dynamique? Les Fichiers de polices ne sont pas, à mon humble avis, destiner à être modifier dynamiquement. Si bien qu'écrire le code CSS dans le fichier .css me paraitrait une meilleure solution.
Lire : https://developer.mozilla.org/fr/doc...les/@font-face

Édit : Passez votre code au validateur pour voir et corriger vos erreurs => https://validator.w3.org/
En HTML </input> n'existe pas.
Vous avez deux déclaration de charset. La ligne 6 suffit.
La balise <br> sert à créer des retours ligne dans une portion de texte, pas à créer des espacements entre balises, pour ce faire il existe margin pading en CSS et autre positionnement type flexbox ou grid layout.
L'attribut align est obsolète en HTML5.

**Kojoh** · 08/02/2026, 20h08

Merci pour ses précisions, en fait je me créer une page pour présenter des font.

**Kojoh** · 09/02/2026, 06h49

Envoyé par casperweb

Enfin je me demande pour quelles raisons rendre cela dynamique? Les Fichiers de polices ne sont pas, à mon humble avis, destiner à être modifier dynamiquement. Si bien qu'écrire le code CSS dans le fichier .css me paraitrait une meilleure solution.

Voir ce que je fais :

https://www.johok-bt.fr/FONTS_JHK/

**NoSmoking** · 10/02/2026, 19h19

Envoyé par Kojoh

Voir ce que je fais :

Il ne te sert à rien de déclarer dans la partie style une classe

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.JHKFONT {
  font-family: 'JHK Batoun 25 V10';
}

d'autant que seule la dernière déclaration sera retenue !

De même lors de la création de tes <span>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<spam style="font-family: 'JHK Batoun 25 V10'; src: url('JHK Batoun 25 V10.otf') format('otf'); font-display: auto; font-size:25px;">JOHOK</spam>

les propriétés src, format et font-display ne te sont d'aucune utilité car non définie à ce niveau.

EDIT : l'élément DOM ce n'est pas spam mais span

**Kojoh** · 10/02/2026, 19h29

Envoyé par NoSmoking

Il ne te sert à rien de déclarer dans la partie style une classe

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.JHKFONT {
  font-family: 'JHK Batoun 25 V10';
}

Si j’enlève mes polices ne sont plus prisent en compte

Police interne au site

HTML

Discussions similaires

Partager

Partager