@font-face ko sous windows

**gregal** · 20/11/2012, 10h51

Bonjour à tous,
Je suis actuellement sur la sortie d'un site web, dans la dernière ligne droite...

Nous rencontrons un problème de Police.
Le souhaite utiliser la police Gill Sans et Gill Sans Bold pour ces titres et menu.

Sous Safari, FF et Chrome MAC, aucun problème la police est super propre.
Par contre sous Windows c'est la que les problèmes commencent à arriver

Déja, sous Chrome et Firefox, l'utilisation de Font face n'est pas reconnu.
Il passe directement à la police de substitution, alors que sous IE 8 c'est OK, il a fallu quand même que je mette une condition.

Sous windows 7, Chrome, FF et IE9 n'interprete rien du tout

J'ai fais une page d'exemple : http://clientweb.altavia-st-etienne....mmo/HTML/test/

Voila la CSS de test

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
 
 
@charset "UTF-8";
/* CSS Document */
 
@font-face {
	font-family: "Gill-sans";
	font-style: normal;
	font-weight: 100;
	src: url('GillSans/GillSans.eot?') format('eot');
	src:  url('GillSans/GillSans.woff') format('woff'), url('GillSans/GillSans.ttf')  format('truetype'),url('GillSans/GillSans.svg#GillSans') format('svg');
}
@font-face {
	font-family: "Gill-sans-bold";
	font-style: normal;
	font-weight: bold;
	src: url('GillSans-Bold/GillSans-Bold.eot?') format('eot');
	src: url('GillSans-Bold/GillSans-Bold.woff') format('woff'), url('GillSans-Bold/GillSans-Bold.ttf')  format('truetype'),url('GillSans-Bold/GillSans-Bold.svg#GillSans-Bold') format('svg');
}
 
 
h1{
 
	font-family: 'Gill-sans', Arial, Helvetica, verdana, sans-serif;
	font-size: 12px;
	color:#000000;
	font-weight: 100
}
h2{
	font-family: 'Gill-sans-bold', Arial, Helvetica, verdana, sans-serif;
	font-size: 30px;
	color:#343534;
 
}
 
p{
 
	font-family: 'Gill-sans', Arial, Helvetica, verdana, sans-serif;
	font-size: 14px;
	color:#8B8C8B;
	line-height:10px;
 
 
}
b{
	font-family: 'Gill-sans-bold', Arial, Helvetica, verdana, sans-serif;
	font-size: 12px;
	color:#000000;
 
}

et mon HTML de test

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test police CSS</title>
<link media="screen" rel="stylesheet" href="./styles.css" />
<!--[if lte IE 8]>
<style type="text/css">
@font-face {
	font-family: "Gill-sans";
	url('GillSans/GillSans.eot?') format('eot'); 
}
@font-face {
	font-family: "Gill-sans-bold";
	src: url('GillSans-Bold/GillSans-Bold.eot?') format('eot'); 
}
</style>
<![endif]-->
</head>
 
<body>
<h1> IMMOBILIER D'ENTREPRISE </h1>
<br/>
<h2>IMMOBILIER D'ENTREPRISE</h2><br/>
<p>Metuentes igitur idem latrones Lycaoniam magna parte campestrem cum se inpares nostris fore congressione stataria documentis frequentibus scirent, tramitibus deviis petivere Pamphyliam diu quidem intactam sed timore populationum et caedium, milite per omnia diffuso propinqua, magnis undique praesidiis conmunitam.</p><br/>
<h1>IMMOBILIER <b>D'ENTREPRISE</b></h1>
</body>
</html>

je pense que je fais mal un truc...

Merci à la personne qui sera m'éclairer

Bonne journée à tous

**Torgar** · 20/11/2012, 11h32

Salut,

Je te recommande la lecture de ce tutoriel pour l'utilisation de @font-face.

On y apprend notamment que cette propriété CSS est bien reconnue par Firefox, Chrome et Internet Explorer.

**Bovino** · 20/11/2012, 11h49

Il n'y aurait pas une erreur dans le nom de la police ?

**gregal** · 20/11/2012, 12h11

Merci pour ce tutorial,
je viens de l'appliquer à la lettre.
Maintenant ça marche bien sous IE 8 et 9. C'est donc cool.

Par contre la police n'est pas prise en compte dans FF et Chrome PC...
quand je regarde dans firebug, il zappe la police pour prendre l'arial en substitution.

Alors que sur ces deux navigateurs sous MAC aucun problème

J'ai remis à jour la page d'exemple et modifié la CSS tel quel :

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
 
@font-face {
	font-family: "Gill-sans";
	src: url('GillSans/GillSans.eot') format('eot');
	src: url('GillSans/GillSans.eot?#iefix') format('embedded-opentype'),
	url('GillSans/GillSans.woff') format('woff'), 
	url('GillSans/GillSans.ttf')  format('truetype'),
	url('GillSans/GillSans.svg#GillSans') format('svg');
	font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: "Gill-sans-bold";
	src: url('GillSans-Bold/GillSans-Bold.eot') format('eot'); 
	src: url('GillSans-Bold/GillSans-Bold.eot?#iefix') format('embedded-opentype'),
	url('GillSans-Bold/GillSans-Bold.woff') format('woff'), 
	url('GillSans-Bold/GillSans-Bold.ttf')  format('truetype'),
	url('GillSans-Bold/GillSans-Bold.svg#GillSans-Bold') format('svg');
	font-weight: bold;
    font-style: normal;
}

Si il y a une erreur dans le nom de la police, je ne le vois pas (