Discussion :

[pierrot10]

Bonjour

J'aimerais appliquer une font spéciale pour le titre de ma page.

Pour cela j'ai téléchargé la font dans mon dossier /font.

Puis, dans mon fichier css, j'ai ajouté ceci

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
 
@font-face{
	font-family:"texgyreadventor";
	src: url("../fonts/texgyreadventor-regular.otf") format("otf");
}
 
body{
	font-size: 12px;
	font-family: verdana;
}
 
.logo{
	font-family: "texgyreadventor", verdana;
        font-size: 20px;
}

L'objectif est donc de n'avoir que la font voulu pour le contenu de '.logo'

Il se trouve que toute ma page à la font voulu, alors que toutes cette page devrait avoir la font verdana. Je ne comprends pas pourquoi, car dans body, je demande bien la versana???

Autre chose, dans le zip de la font que j'ai téléchargé, j'ai plusieurs variantes:

texgyreadventor-bold.otf
texgyreadventor-bolditalic.otf
texgyreadventor-italic.otf
texgyreadventor-regular.otf

Comment dois-je modifier ma ligne font-face, pour pouvoir utiliser la variante bold, italic, etc?

Dois.je créer plusieurs font-face comme 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
@font-face{
	font-family:"texgyreadventor";
	src: url("../fonts/texgyreadventor-regular.otf") format("otf");
}
 
@font-face{
	font-family:"texgyreadventor-bold";
	src: url("../fonts/texgyreadventor-bold.otff") format("otf");
}
 
@font-face{
	font-family:"texgyreadventor-bolditalic";
	src: url("../fonts/texgyreadventor-bolditalic.otff") format("otf");
}
 
@font-face{
	font-family:"texgyreadventor-italic";
	src: url("../fonts/texgyreadventor-italic.otf") format("otf");
}

Ou puis définir les variantes dans une section $font-face?

Merci et belle soirée

[ABCIWEB]

Il se trouve que toute ma page à la font voulu, alors que toutes cette page devrait avoir la font verdana. Je ne comprends pas pourquoi, car dans body, je demande bien la versana???

Body est pris en compte tant qu'un autre style n'est pas défini plus loin. Et avec la règle de l'héritage il est probable que tes autres blocs de texte héritent de la div .logo. Donc soit tu restructure ton code, soit tu redéfini les styles de police pour tes autres conteneurs de texte.

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
@font-face{
	font-family:"texgyreadventor";
	src: url("../fonts/texgyreadventor-regular.otf") format("otf");
}
 
@font-face{
	font-family:"texgyreadventor-bold";
	src: url("../fonts/texgyreadventor-bold.otff") format("otf");
}
 
@font-face{
	font-family:"texgyreadventor-bolditalic";
	src: url("../fonts/texgyreadventor-bolditalic.otff") format("otf");
}
 
@font-face{
	font-family:"texgyreadventor-italic";
	src: url("../fonts/texgyreadventor-italic.otf") format("otf");
}

Si tu fais comme cela, tu devras indiquer à chaque fois un font-family différent pour changer la police. Si tu veux pourvoir utiliser les styles il faut les indiquer dans les règles font-face. Par exemple :

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
@font-face{
	font-family:"texgyreadventor";
	src: url("../fonts/texgyreadventor-regular.otf") format("otf");
        font-weight: normal;
        font-style: normal;
}
 
@font-face{
	font-family:"texgyreadventor";
	src: url("../fonts/texgyreadventor-bold.otff") format("otf");
        font-weight: bold;
        font-style: normal;
}
 
@font-face{
	font-family:"texgyreadventor";
	src: url("../fonts/texgyreadventor-bolditalic.otff") format("otf");
        font-weight: bold;
        font-style: italic;
}
 
@font-face{
	font-family:"texgyreadventor";
	src: url("../fonts/texgyreadventor-italic.otf") format("otf");
        font-weight: normal;
        font-style: italic;
}

Au passage les navigateurs modernes utilisent plutôt "woff2" ou sinon "woff" (pour les plus anciens) plutôt que "otf".

[pierrot10]

Hello
Merci pour ta réponse et désolé de revenir aussi tard.

Malheureusement je bloque toujours à ce sujet et j'aimerais apporter une correction.

La font texgyreadventor doit etre maintenant appliqué à body.

J'ai donc fait ceci

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
@font-face{
	font-family:"texgyreadventor";
	src: url("../fonts/texgyreadventor-regular.otf") format("otf");
	font-weight: normal;
  	font-style: normal;
}
 
 
@font-face{
	font-family:"texgyreadventor";
	src: url("../fonts/texgyreadventor-bold.otf") format("otf");
	font-weight: bold;
  	font-style: normal;
}
 
font-face{
	font-family:"texgyreadventor";
	src: url("../fonts/texgyreadventor-bolditalic.otff") format("otf");
    font-weight: bold;
    font-style: italic;
}
 
@font-face{
	font-family:"texgyreadventor";
	src: url("../fonts/texgyreadventor-italic.otf") format("otf");
    font-weight: normal;
    font-style: italic;
}
 
 
 
body{
	font-size: 15px;
	font-family: "texgyreadventor", Verdana, Helvetica, sans-serif;
	color:#000000;
}

mais malheureusement sans succès et il semble que c'est éa verdana qui est appliqué. J'ai donc du mal à comprendre. Est-ce que je n'utiliserais pas le format woff2?

Je ne le trouve pas à part ceci https://github.com/esmep23/dulce/tree/master/css/font

Devrais-je télécharger
texgyreadventor-regular-webfont.woff2
texgyreadventor-italic-webfont.woff2
texgyreadventor-bolditalic-webfont.woff2
exgyreadventor-bold-webfont.woff2

mais dans ce cas, cette adaptation serait correcte?

Code :

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

1
2
3
4
5
6
7
@font-face{
	font-family:"texgyreadventor";
	src: url("../fonts/texgyreadventor-italic.otf") format("otf");
       src: url("../fonts/texgyreadventor-italic-webfont.woff2") format("woff2");
    font-weight: normal;
    font-style: italic;
}

[pierrot10]

Ah par contre, le fait d'avoir ajouté ceci (font-weight, font-style)

Code :

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

1
2
3
4
5
6
7
body{
	font-size: 15px;
	font-family: "texgyreadventor", Verdana, Helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
	color:#000000;
}

et d'avoir ajouté ceci

Code :

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

1
2
3
4
5
6
7
@font-face{
	font-family:"texgyreadventor";
	src: url("../fonts/texgyreadventor-italic.otf") format("otf");
	src: url("../fonts/texgyreadventor-italic-webfont.woff2") format("woff2");
    font-weight: normal;
    font-style: italic;
}

pour les 4 variantes de texgyreadventor,
ca change la donne!