Discussion :

[nouby]

Bonjour, google, ne me trouve pas solution à ma question, il me montre l'ajout d'une seule font alors que je lui demande pour plusieurs fonts, libres de droits venant de Da-font.

Ma recherche : CSS Ajouter plusieurs fonts
Mon autre recherche : CSS Ajouter plusieurs polices

[nl.smart]

Bonjour,

Que je sache tu es libre d'ajouter autant de font que tu souhaites, jettes un œil au css ci-dessous :

Code :

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

1
2
3
4
5
6
7
8
@font-face {
    font-family: 'Photograph_Signature';
    src: url('../font/Photograph_Signature.ttf');
}
.font_slogan {
    font-family: Photograph_Signature;
    color: rgb(0, 0, 0);
}

dans un premier temps tu appelles une font que tu as déposé dans un dossier de ton site => @font-face {...}

puis tu crées une classe comme dans le cas présent que tu pourras ensuite appeler dans ton code html => .font_slogan {...}

et que tu appelles ainsi dans ton html

Code html :

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

<a class="font_slogan" href="index.php?page=50">...

Dans ce même fichier css tu peux ajouter ce code

Code :

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

1
2
3
4
5
6
7
.font{
    font-family: 'Montserrat', sans-serif;
    font-weight: bolder;
}
.font_toto{
    font-family: 'Courier New', Courier, monospace;
}

La classe .font est créée dans le css puis sera appelée dans ton html ou php, tout comme la classe .font_toto

Code html :

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

<a class="font" href="index.php?page=30">...

Code html :

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

<a class="font_toto" href="index.php?page=10">...

et ainsi tu peux utiliser autant de font que tu le souhaites pour une page, car tu peux les créer, les modifier...
espérant avoir été clair, je suis débutant.

[nouby]

Je te remercie de ton explication, je vais essayer de comprendre tout ça

Apparement tu as ajouté plusieurs font mais je vois qu'il n'y a qu'un seul font face ?

Il faut un font face pour chaque nouvelle font ou il faut un family pour cela ?

Code CSS :

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
@font-face {
    font-family: 'savez';
    src: url('../fnt/savez.ttf') format('Truetype');
    font-weight: normal;
    font-style: normal;
 
}
 
@font-face {
    font-family: 'mousetrap', 'mousetrap2';
    src: url('../fnt/mousetrap.ttf') format('Truetype');
    font-weight: normal;
    font-style: normal;
 
}
 
.mafonte{
    font-family:mousetrap;
 
}
 
#texte_msg{
    position:relative;
    display:block;
    width:90%;
    height:90%;
    top:30px;
    margin-left:auto;
    margin-right:auto;
    font-size:40px;
    font-family:'mafonte';
    font-weight:bold;
    font-style: normal;
    color: #a9e671;
}

[nl.smart]

Je t'en prie, je peux aider, le front il y en a sur un site web :-)

connais tu ce site ? https://www.w3schools.com/

https://www.w3schools.com/cssref/css...-face_rule.php

pour tes recherches réalises les en langue anglaise, ne manque pas de pratiquer la langue de Shakespeare, pour le web et le dev c'est ce qu’il faut.

mon exemple @font-face est donné pour une font, pas plus, et donc oui Il faut un font face pour chaque nouvelle font, une @font-face par classe, regarde ci-dessous, tu vas comprendre, espérant ne pas me tromper
et tu appelles dans ton html la classe font_slogan, Ta_fonte ou mafonte

Code :

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

1
2
3
4
5
6
7
8
@font-face {
    font-family: 'Photograph_Signature';
    src: url('../font/Photograph_Signature.ttf');
}
.font_slogan {
    font-family: Photograph_Signature;
    color: rgb(0, 0, 0);
}

Code :

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

1
2
3
4
5
6
7
8
9
10
@font-face {
    font-family: 'savez';
    src: url('../fnt/savez.ttf') format('Truetype');
    font-weight: normal;
    font-style: normal;
 
}
.Ta_fonte{
    font-family:savez;
}

Code :

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

1
2
3
4
5
6
7
8
9
10
@font-face {
    font-family: 'mousetrap', 'mousetrap2';
    src: url('../fnt/mousetrap.ttf') format('Truetype');
    font-weight: normal;
    font-style: normal;
 
}
.mafonte{
    font-family:mousetrap;
}

[nouby]

Merci, t'est super !
je vais étudier ça, j'essaies de faire un jeu 2D dans l'espace, j'ai vu qu'il y en a plein sur le net et majoritairement en 3D, c'est pas trop mon truc.
Je veux un jeu simple où il faut pas être ingénieur pour gérer son perso, ses vaisseaux et le reste.
J'en suis à 10% du projet je pense là, lol

Je connais bien la structure des jeux en amateur


EDIT :

J'ai fais comme ça et ça ne marche pas :

Code CSS :

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
@font-face {
    font-family: 'savez';
    src: url('../fnt/savez.ttf') format('Truetype');
    font-weight: normal;
    font-style: normal;
 
}
 
@font-face {
    font-family: 'mousetrap', 'mousetrap2';
    src: url('../fnt/mousetrap.ttf') format('Truetype');
    font-weight: normal;
    font-style: normal;
 
}
 
.mafonte{
    font-family:mousetrap;
 
}
 
#texte_msg{
    position:relative;
    display:block;
    width:90%;
    height:90%;
    top:30px;
    margin-left:auto;
    margin-right:auto;
    font-size:40px;
    font-family:mafonte;
    font-weight:bold;
    font-style: normal;
    color: #a9e671;
}

Pourtant le chemin d'accés est bon.
texte_msg est un DIV.

[nl.smart]

Essaye de faire fonctionner la première font

ton fichier css contient le code ci-dessous

ton_css.css

Code :

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

1
2
3
4
5
6
7
8
9
10
@font-face {
    font-family: 'savez';
    src: url('../fnt/savez.ttf') format('Truetype');
    font-weight: normal;
    font-style: normal;
 
}
.Ta_fonte{
    font-family:savez;
}

ton fichier html contient au moins le code ci-dessous dans le head,

Code html :

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

1
2
3
4
5
6
7
<head>
    <meta charset="utf-8">
 
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link rel="stylesheet" href="../dossier_de_ton_css/ton_css.css">
</head>

Code html :

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

1
2
3
<div>
    <p class="Ta_fonte">Formulaire de contact.</p>
</div>

ça doit être ça, essaye de retirer format('Truetype')

essaye de voir sur le site https://www.dafont.com/fr/