@font-face, le retour... [résolu]

Bonjour,

Après avoir déjà tenté sans succès d'installer des polices en font-face, j'avais fini par découvrir une solution avec google font qui marche à merveille...

Seulement afin de progresser - et aussi pour faire des tests d'optimisation - je me suis penché à nouveau sur la méthode qui consiste à héberger sois-même ses polices... et je n'y arrive toujours pas !

Voici mon code, si vous aviez la gentillesse de m'indiquer mon erreur... :

@font-face
{
	font-family:'Forum';
	src:url('../fonts/forum.eot?#iefix') format('embedded-opentype'), url('../fonts/forum.woff') format('woff'), url('../fonts/forum.ttf') format('truetype'), url('../fonts/forum.svgz#ForumRegular') format('svg'), url('../fonts/forum.svg#ForumRegular') format('svg');
	font-weight:400;
	font-style:normal;
}

@font-face
{
	font-family:'JosefinSans';
	src:url('../fonts/josefinsans.eot?#iefix') format('embedded-opentype'), url('../fonts/josefinsans.woff') format('woff'), url('../fonts/josefinsans.ttf') format('truetype'), url('../fonts/josefinsans.svgz#JosefinSansRegular') format('svg'), url('../fonts/josefinsans.svg#JosefinSansRegular') format('svg');
	font-weight:400;
	font-style:normal;
}

Modifié par Olivier C (17 Sep 2011 - 17:25)

T'es passé par le font generator ?
T'as vérifié tes chemins ?

exemple avec une police gratuite téléchargée sur dafont et un sous-dossier "font" dans le dossier css

@font-face {
    font-family: 'PaperMacheRegular';
    src: url('font/paper-mache-webfont.eot');
    src: url(font/'paper-mache-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/paper-mache-webfont.woff') format('woff'),
         url('font/paper-mache-webfont.ttf') format('truetype'),
         url('font/paper-mache-webfont.svg#PaperMacheRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Après pour appliquer tes polices tu n'utilises que le font-family

p{
 font-family: 'PaperMacheRegular';
}

Modifié par jmlapam (17 Sep 2011 - 13:01)

Moi si j'étais toi je passerais aussi par le generator de Font Squirrel, il est pratique et marche parfaitement bien, il suffit de changer l'adresse des polices si tu les mets dans un sous-dossier, et le tour est joué !

Réédition : je penais avoir trouvé la solution en ajoutant l'information "local" avant les "url" pour la déclaration "src", mais cela ne fonctionne toujours pas. Je cherche encore...
Modifié par Olivier C (17 Sep 2011 - 15:56)

C'est bon, cette fois c'est la bonne ! J'ai fais une erreur très bête : à la place de...

font-family:'JosefinSans'

...il me fallait écrire :

font-family:'Josefin Sans'

Avec un espace donc... Une erreur d'innatention qui coûte cher en temps... et en crise de nerf !

Juste pour jmlapam qui a dit :

a écrit :
Après pour appliquer tes polices tu n'utilises que le font-family.

Je ne vois pas en quoi cela pourrait influer sur un affichage spécifique à @font-face. D'ailleurs j'utilise toujours les raccourcis CSS pour mes feuilles de style et je n'ai décelé de bugs sur aucun navigateurs testés.

Voici donc mon code CSS final (et compressé) pour une police ("Forum" que l'on peut trouver sur Google Web Font), ce sera ma petite contribution :

@font-face{font-family:'Forum';src:local('forum'), local('Forum'), url('../fonts/forum.eot?#iefix') format('embedded-opentype'), url('../fonts/forum.woff') format('woff'), url('../fonts/forum.ttf') format('truetype'), url('../fonts/forum.svgz#ForumRegular') format('svg'), url('../fonts/forum.svg#ForumRegular') format('svg');font-weight:normal;font-style:normal;}

Merci à tous. Bien à vous
Modifié par Olivier C (03 Oct 2011 - 18:23)

Olivier C a écrit :


Je ne vois pas en quoi cela pourrait influer sur un affichage spécifique à @font-face. D'ailleurs j'utilise toujours les raccourcis CSS pour mes feuilles de style et je n'ai décelé de bugs sur aucun navigateurs testés.

c'est juste que tu utilises le font-family là où tu veux que ta police soit appliquée, voilà tout.

jmlapam a écrit :
c'est juste que tu utilises le font-family là où tu veux que ta police soit appliquée, voilà tout.

J'avais bien compris. Je voulais dire que j'utilise préférentiellement les raccourcis CSS. C'est à dire, pour ce qui nous intéresse, sous cette forme :

{font:400 2em 'Josefin Sans',serif;}

Et je n'ai jamais eu de soucis de compatibilité entre navigateurs...

Stephanelam a écrit :
Moi si j'étais toi je passerais aussi par le generator de Font Squirrel, il est pratique et marche parfaitement bien, il suffit de changer l'adresse des polices si tu les mets dans un sous-dossier, et le tour est joué !

C'est ce que j'utilise aussi, et ce truc est génial pour convertir les polices, auparavant je galèrais...

Bien à vous deux
Modifié par Olivier C (18 Sep 2011 - 09:33)