Discussion :

[20cents]

Bonsoir à tous,

Je suis en train de réaliser une "copie" de mon site web en projet actuel en HTML5 et CSS3.

Le seul hic rencontré pour l'instant en dehors de la non compatibilité avec Explorer, c'est le @font-face !

En effet, il fonctionne parfaitement sur Safari, Chrome, mais pas sur Firefox (3.6).

Alors qu'apparemment, en parcourant le web, j'ai lu qu'il était totalement possible pour Firefox d'afficher ce type de requête.

Voillà la ligne css correspondante :

Code :

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

1
2
3
4
5
6
 
 
@font-face {
	font-family: 'NewRegular';
	src: local('NewRegular'), local('ImpactLabel'), url('fonts/ImpactLabel.ttf') format('truetype');
}

J'ai d'abord pensé à un probleme .otf >< .ttf mais sur d'autre site, le ttf fonctionne très bien, en regardant le code source.

Merci de bien vouloir m'éclairer

Merci d'avance

[cssman]

Code :

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

1
2
3
4
@font-face {
 font-family:ImpactLabel;
 src:url(fonts/ImpactLabel.ttf) format("truetype");
 }

[20cents]

:
Bonsoir,

Merci pour l'aide

Ca ne fonctionne toujours pas

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
@font-face {
 	font-family:"ImpactLabel";
 	src:url("fonts/ImpactLabel.ttf") format("truetype");
}
 
header h1 {
	font-family: "ImpactLabel";
	font-size:36px;
	color: white;
	text-shadow: 0px 0px 5px #fff;
}

Je comprend pas, ca fonctionne sur Safari et Chrome !

[cssman]

C'est une faute de frappe ou il manque un . ou un # avant header ?

[Macmillenium]

C'est une faute de frappe ou il manque un . ou un # avant header ?

Je suis en train de réaliser une "copie" de mon site web en projet actuel en HTML5 et CSS3.

HEADER est un nouveau élément HTML 5.

@20cents : As-tu vérifié sur firebug (onglet réseaux) si la font a été chargée ?

[20cents]

Merci pour l'aide

Comment ca ?

Je l'ai directement uploadée sur mon FTP. Et comme j'ai dit elle s'affiche correctement avec Safari et Chrome.

Enfin, que veux-tu dire "si la font a été chargée" ?

Merci

[12monkeys]

Bonsoir

Enfin, que veux-tu dire "si la font a été chargée" ?

Le fichier de police doit être chargé sur le navigateur du visiteur tout comme un fichier css ou image, ou html... C'est que tu dois aller vérifier avec firebug...

Regarde là pour l'onglet réseau : http://eric-pommereau.developpez.com...eb/firebug/#LV

[20cents]

Apparemment pas !

Meme quand j'affiche le css avec Firebug, la ligne @font-face n'y figure pas

Y a -t-il une solution ? J'ai pas encore trouvé ce type de problème, du moins résolu sur le net...

Merci

Ps: Quand je vais sur l'onglet réseau de Firebug, il me dit qu'il n'est pas activé...

[Macmillenium]

As-tu une page en ligne ?

[12monkeys]

Ps: Quand je vais sur l'onglet réseau de Firebug, il me dit qu'il n'est pas activé...

Tout de même... il faut l'activer

[cedric_g]

Bonjour

Il existe une solution cross browser (compatible IE / FF...) mais cela nécessite de convertir vos fichiers de polices dans différents formats (il existe des utilitaires en ligne pour ça, je n'ai plus l'URL en tête ni sous la main mais ça existe)

Exemple de code CSS :

Code :

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

1
2
3
4
 
@font-face {
	font-family: 'century-gothic'; 	src: url('gothic.eot');	src: local('Century Gothic Regular'), local('CenturyGothic'), url('gothic.woff') format('woff'), url('gothic.ttf') format('truetype'), url('gothic.svg#CenturyGothic') format('svg');
}

Permet l'utilisation de 'century-gothic' dans les classes CSS au niveau de font-family

Pour la conversion, rechercher "conversion ttf eot svg", je pense que ça devrait amener à des outils gratuits en ligne.

(voir mon site www.effi10.com pour exemple d'intégration)

[Ethyde]

@Cedric_g : en même temps la sa font marche et le format est valide pour firefox, à mon avis le probleme viens du chemin au fichier qui doit poser probleme

Sinon sur le sujet de l'usage de @font-face en cross browser (avec générateur et tout ) :

http://nicewebtype.com/notes/2009/10...css-font-face/

http://paulirish.com/2009/bulletproo...tation-syntax/

[cedric_g]

Il faut simplement que les fichiers de police soient au même niveau que le fichier CSS (même principe que pour les images inclues dans les CSS en fait)

[Ethyde]

Il faut simplement que les fichiers de police soient au même niveau que le fichier CSS (même principe que pour les images inclues dans les CSS en fait)

euh ... lol ?

en css pour les image comme pour le reste, on peu très bien utiliser les chemin relatif/absolue, c'est plus propre ça évite de se retrouver avec des répertoires qui mélange visuel, css et js

[cedric_g]

Oui je suis d'accord, mais le chemin est simplement relatif au fichier CSS. Pour faire simple dans un premier temps, on peut ne pas mettre de chemin relatif et tout claquer au même niveau.

Voilà (ainsi on s'assure que cela ne vient pas de là)