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 !

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

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

tu codes en local ?

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

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 Florian-_-I 17 mai 2017 à 16:00:25

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 

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 Anonyme 17 mai 2017 à 19:31:15

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

@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 Anonyme 17 mai 2017 à 19:42:42

Bonjour a tous,

J'ai tenter de vous relire un peu tous pour tenter de trouver une solution...Voila je suis le tp et j'essaye de generer le fichier css de dayrom comme dit dans le cours seulement via fontsquirell, ce message s'affiche en inserant le fichier .ttf : "The font dayrom.ttf is already a webfont. We do not allow you to reprocess existing webfonts. Please only run original OTF and TTF fonts through the Generator."

J'ai les fichiers dayrom .svg .eot .woff, je ne sais pas trop quoi en faire du coup...

Pour la police ballpark ca a fonctionne.. quelqu'un aurait une explication? Est ce que je peux reprendre le code ballpark et en le modifiant pouvoir obtenir ma police dayrom de cette facon?

Merci pour votre aide

Bonjour, pour te répondre Gennyjen car j'ai le même problème que toi, j'ai effectué la même opération sur un autre site : https://transfonter.org/

Bon code

Merci Frederic pour le lien

Avec plaisir Gennyjen

Merci frederic pour le lien . Nickel

Merci Frederic pour le lien :D 

Ca m'a été d'une grande aide. En plus ton site est simple à comprendre.