Partage

Problème avec le générateur de police fontsquirrel

TP : création d'un site pas à pas

17 mai 2017 à 0:11:46

Bonjour, j'ai un problème au chapitre " TP : création d'un site pas à pas" du cours "Apprenez à créer votre site web avec HTML5 et CSS3".

En effet, pour reproduire la maquette de page web proposé, on a besoin de 3 polices différentes : Trébuchet MS qui est installée sur la plupars des ordinateurs, et BallparkWeiner et Day Roman qui sont des polices exotiques. Il faut faire télécharger le kit de polices dans tous les formats pour que les polices s'affichent correctement sur tous les navigateurs. Et le cours nous propose d'utiliser le générateur du site FontSquirrel.

J'envois les fichiers .ttf (TrueType) au générateur pour qu'il me les convertisse et il m'envoie ce code CSS :

@font-face {
    font-family: 'webfontregular';
    src: url('ballpark-webfont.woff2') format('woff2'),
         url('ballpark-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'webfontregular';
    src: url('dayrom-webfont.woff2') format('woff2'),
         url('dayrom-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

et les polices ne s'affichent pas...

alors que celui qu'il y a dans le cours (et qui fonctionne) est celui là :

@font-face
{
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark.eot');
    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
         url('polices/ballpark.woff') format('woff'),
         url('polices/ballpark.ttf') format('truetype'),
         url('polices/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}

Je voulais savoir si ceux qui ont suivi ce cours ont eu ce problème et si ils savent d'où ça vient ?

Est-ce que c'est des paramètres de sortie des résultats de la conversion sur FontSquirrel ? Est-ce que j'ai pas rentré les bon fichiers dans le générateur ?

Voilà ! J'attends vos réponses avec impatiente ! Merci d'avance !

17 mai 2017 à 13:55:58

ou se trouve ton dossier polices ?

dans le dossier css ?

ou au même niveau ?

Si il est pas dedans il faut mettre le lien ainsi : ../polices/ta_police

Mon portfolio / Nouveau projet -->Expedition wars/  Le CSS ça peut craindre -->Conférence CSS3.CREATE
17 mai 2017 à 14:46:01

Le dossier qui contient les polices il est au même niveau que le fichier CSS comme sur la capture :

Je donne aussi une capture du dossier polices au cas où :
17 mai 2017 à 15:25:09

tu codes en local ?

si oui, as-tu installé les police dans ton dossier c:/windows/Fonts/ ?

Mon portfolio / Nouveau projet -->Expedition wars/  Le CSS ça peut craindre -->Conférence CSS3.CREATE
17 mai 2017 à 15:51:55

Oui oui elles y sont mais ma question portait surtout sur pourquoi FontSquirrel ne me donne pas le même code CSS...

Ah j'ai un peu modifié mon code et j'ai réussi. Voilà mon code qui marche :

@font-face {
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark.woff2') format('woff2'),
         url('polices/ballpark.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Dayrom';
    src: url('polices/dayrom.woff2') format('woff2'),
         url('polices/dayrom.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

C'est toujours pas le même code que dans le cours, mais ça marche maintenant mais je sais toujours pas pourquoi j'ai pas le même code, ni comment on obtient celui du cous.

-
Edité par FlorianIlles 17 mai 2017 à 16:00:25

17 mai 2017 à 19:09:05

bah... là normal ^^ 

il manque le .eot, le .ttf le .eot?#iefix et le .svg#Dayrom

ça risque pas de fonctionner 

sans compter que woff2 n'existe pas 

Mon portfolio / Nouveau projet -->Expedition wars/  Le CSS ça peut craindre -->Conférence CSS3.CREATE
17 mai 2017 à 19:25:21

Effectivement, fontsquirrel ne donne que du woff et du woff2, déjà ils ont des problèmes avec beaucoup de police pour lesquels ils ne peuvent pas donner d'autres formats directement avec le kit.

J'ai aussi eu des problèmes d'affichage de police avec certaines polices téléchargées sur fontsquirrel, le mieux c'est d'éviter fontsquirrel et d'utiliser un autre site.

Le woff2 existe depuis 2013 d'après wikipedia.

EDIT: si tu veux que fontsquirrel te fournisse d'autres formats il suffit de passer en Expert et non pas optimal. Mais le fait qu'il ne propose même pas de format pour ie par défault est déroutant.

-
Edité par ShaWaTK 17 mai 2017 à 19:31:15

17 mai 2017 à 19:31:09

prends  google fonts. y a une large gamme et vu que ça viens de chez eux déjà, tu n'auras pas d'erreur (...en théorie ;))
Mon portfolio / Nouveau projet -->Expedition wars/  Le CSS ça peut craindre -->Conférence CSS3.CREATE
17 mai 2017 à 19:39:52

@Florianilles ne te focalise pas sur le fait d'avoir exactement la même chose que sur le cours, tant que tu as compris que tous les navigateurs ne peuvent pas utiliser le même fichier de police, et qu'il faut donc en préciser plusieurs par précaution (d'où les différentes extensions de fichiers) et tant que tu ne développe pas vraiment de site, c'est pas trop un problème. Il faudra juste que t'y penses le jour où tu partageras ton site.

-
Edité par ShaWaTK 17 mai 2017 à 19:42:42

Problème avec le générateur de police fontsquirrel

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown