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;
}

[Yazza]

ça ne marche toujours pas voilà mon css actuel :

Code :

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

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

[NoSmoking]

j'aurais essayé font-family: "Agency FB";.

[Yazza]

Cette méthode là fonctionne car il trouve la police sur mon pc mais pas sur ceux qui n'ont pas la police, on en revient au point de départ :S

[Invité]

A ça c'est sûr !

Si tu ne télécharges pas les fichiers sur le serveur...

[Bisûnûrs]

C'est soit un problème de chemin, soit un problème de fichier inexistant, soit les deux. Donc faut vérifier ces deux points, voilà, c'est pas compliqué.

[Yazza]

Je dois mettre la police sur le serveur de mon site ? En l'occurrence sur FileZilla donc

[Bovino]

FileZilla n'est pas un serveur...

Mais oui, ça semble évident que pour pouvoir récupérer les polices, il faut bien qu'elles se trouvent quelque part et sur ta machine, ça ne sert pas à grand monde !

Donc oui, tu dois utiliser FileZilla pour déposer les fichiers à l'emplacement où tu as écris dans ton code qu'ils étaient.

[Yazza]

C'est bon ça fonctionne ! Mais il y a un nouveau problème que vous pourrez constater par vous même en vous rendant sur le site (http://yazzaeditor.free.fr/) c'est que pour afficher la police il demande une authentification, sur Filezilla il y a un onglet "Droit d'accès au fichier" et quand quand je coche tout ça ne change rien

Quelqu'un à une solution ?

[rodolphebrd]

La police s'affiche nickel chez moi...

[Yazza]

Bizarre j'ai essayé sur 2 autres PC et la police ne s'affichait pas

[Bisûnûrs]

C'est quoi cette URL dans ton CSS :
ftp://yazzaeditor@ftpperso.free.fr/f...yr-webfont.eot


Les URL doivent utiliser le protocole HTTP ...

[Invité]

Bonjour,
ton site est hébergé chez .free.fr.
Tu as donc bien un... hébergement chez free.fr !
(lapalissade, mais qui devait être préciser)

1/ Pourquoi fais-tu appel à des images extérieures ?

Code :

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

    background-image: url("http://image.noelshack.com/fichiers/2014/07/1392208532-background2nd.png"), url("http://image.noelshack.com/fichiers/2014/06/1391603157-background-site-yazza.png");

2/ Comme le dit bisounours, idem pour les fichiers font : re-

Code css :

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

1
2
3
4
5
6
@font-face {
    font-family: "agency_fbregular";
    font-style: normal;
    font-weight: normal;
    src: url("ftp://yazzaeditor@ftpperso.free.fr/fonts/agencyr-webfont.eot?#iefix") format("embedded-opentype"), url("ftp://yazzaeditor@ftpperso.free.fr/fonts/agencyr-webfont.woff") format("woff"), url("ftp://yazzaeditor@ftpperso.free.fr/fonts/agencyr-webfont.ttf") format("truetype"), url("ftp://yazzaeditor@ftpperso.free.fr/fonts/agencyr-webfont.svg#agency_fbregular") format("svg");
}

Les images et fichiers sont censé être téléchargé sur TON serveur (Espace Perso chez free.fr).
Via Filezilla si tu veux (Filezilla n'est qu'un intermédiaire de transfert FTP !)

N.B. Je ne suis pas sûr que tu saches ce que tu fais... ni ce qu'est un "serveur" ou un "hébergement"...

[Yazza]

1/ Pourquoi fais-tu appel à des images extérieures ?

Code :

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

    background-image: url("http://image.noelshack.com/fichiers/2014/07/1392208532-background2nd.png"), url("http://image.noelshack.com/fichiers/2014/06/1391603157-background-site-yazza.png");

Tout simplement car je n'avais pas encore d'hébergeur ^^ ça risque de ralentir le site ?


Le chemin que me propose filezilla est bien par exemple : ftp://yazzaeditor@ftpperso.free.fr/index.html

Et pas http://yazzaeditor@ftpperso.free.fr/index.html

Comment je fais pour avoir le chemin avec http ?

[Bisûnûrs]

Comment je fais pour avoir le chemin avec http ?

C'est quoi l'adresse de ton site ?