Discussion :

[Yazza]

Bonjour à tous, j'ai suivi à la lettre (du moins je le pense) un tuto qui permet d'afficher une police personnalisé sur tout les écrans des visiteurs de mon site web. Le problème est que j'ai du faire une erreur quelque part car @font-face ne fonctionne pas.

Merci mille fois à celui qui me sortira de ce pétrin

Voilà le tuto : http://vviale.developpez.com/tutoriels/font-face/
Voilà mon site : http://yazzaeditor.free.fr/index.html
Voilà la police concerné : http://fr.fontriver.com/font/agency_fb/
Voilà mon CSS (@font-face) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
@font-face {
    font-family: 'agency_fbregular';
    src: url('agencyr.eot');
    src: url('agencyr.eot?#iefix') format('embedded-opentype'),
         url('agencyr.woff') format('woff'),
         url('agencyr.ttf') format('truetype'),
         url('agencyr.svg#agency_fbregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

[Astoumix]

Bonjour,

En mettant ton @font-face au tout début du css, ça ne fonctionne toujours pas ?

[Yazza]

Nop ça ne change rien je viens d'essayer

[NoSmoking]

Bonjour,
tu es sûr du nom à appliquer font-family: 'agency_fb';?

[Yazza]

J'ai essayé avec "agency_fbregular" et ensuite avec "agency_fb" ça ne marchait pas

[Invité]

Bonjour,
(en plus de) : Comment utiliser une police personnalisée sur un site Web ?

=> http://www.fontsquirrel.com/tools/webfont-generator
-> génère les fonts + css

N.B. Si ton fichier CSS est dans un dossier "css" et les fonts dans un dossier "fonts" (au même niveau) :
remplacer :

Code :

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

1
2
url('agencyr.eot');
[....]

par :

Code :

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

1
2
url('../fonts/agencyr.eot');
[....]

Bref : le chemin relatif entre le dossier "css" et le dossier "fonts".

Exemple de CSS :

Code css :

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

1
2
3
4
5
6
7
8
9
10
@font-face { /* Raleway */
    font-family: 'Raleway';
    src: url('../fonts/Raleway/raleway-regular-webfont.eot');
    src: url('../fonts/Raleway/raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Raleway/raleway-regular-webfont.woff') format('woff'),
         url('../fonts/Raleway/raleway-regular-webfont.ttf') format('truetype'),
         url('../fonts/Raleway/raleway-regular-webfont.svg#Raleway') format('svg');
    font-weight: normal;
    font-style: normal;
}