28172 sujets

CSS et mise en forme, CSS3

[Résolu] @font-face ne s'affiche pas

Bonjour,

Le sujet a souvent été abordé sur le forum mais je n'ai pas trouvé la solution à mon problème.

J'ai un dossier "MonSite" où est stocké le site en construction ; je suis en local. Dans ce dossier, j'ai mes pages .php et ma feuille css. J'ai également dans "MonSite", le dossier "polices".

Dans ma feuille css, j'appelle une police comme ceci :

@font-face {
	font-family: 'dancingscript-regular-webfont';
		src: url(http://MonSite/polices/dancingscript-regular-webfont.woff2) format('woff2'),
		url(http://MonSite/polices/dancingscript-regular-webfont.woff) format ('woff');
	font-weight: normal;
	font-style: normal;
}


et je poursuis ainsi :

p {
	padding: 2em;
	font-family: "dancingscript-regular-webfont", Verdana,"Lucida Grande",Tahoma,Helvetica,Sans-Serif;
}


J'ai forcément fait une ânerie mais la question est... laquelle svp ?!

Merci Smiley smile
Modérateur
Bonjour,

Pourquoi ne pas juste mettre en relatif :
polices/dancingscript-regular-webfont.woff2

Si j'ai bien compris le css se trouve dans le meme dossier que le dossier "polices"
Bonjour Laurent

Même en chemin relatif cela ne fonctionne pas et oui, le fichier css est dans le dossier "MonSite" tout comme le dossier "polices".

:)
Modérateur
Du coup il faut bien vérifier tout les noms de dossier et de police (attentions aux majuscules et faire des copier coller c'est plus sur). On a beau "etre sur" on s'est souvent là que ca coince.

Et sinon regarder dans la console si le fichier est bien chargé, puis si la font est bien appliquée sur l'élément.
Les noms de fichiers viennent d'être à nouveau vérifié et tout est semblable.

Dans ma console, je vois bien que la police est appelée Smiley decu

Suis sûre que c'est une broutille mais ça me turlupine !
Modérateur
Et avec des guillemets partout plutôt qu'un mélange de simple quotes et que guillemets ?
Avec des quote autour de l'url aussi ? et sans le format ? avec avec juste un seul fichier ?
#leMecCherchePartout
Modérateur
Et aussi les tiret dans le nom de la font ! Ca me parle je crois... tente avec du camelCase ou des espaces plutot..
Modifié par _laurent (28 Feb 2017 - 19:30)
Administrateur
Bonjour,

oui +1 à tous les conseils de _laurent Smiley smile
Fais une copie, renomme en "unseulmot.woff" et déplace à côté de CSS (HTML, CSS et fonte dans le même répertoire : on élimine quelques soucis le temps du test Smiley smile )
Ensuite dans les DevTools, si Réseau / Network indique pas de 404 mais un code 302 / 200, regarde le poids de la police : le même que le fichier ou bien plus léger ? (avec Fx) Clique sur la fonte dans l'onglet Réseau et regarde l'onglet "Réponse" : est-ce que c'est du binaire incompréhensible ou ... une 404 ? Quel mime-type : text/html ou truc/woff (il faut ce dernier) ? Possible que le serveur soit pas configuré pour servir du WOFF2 (mais WOFF normalement si).

Valide ta CSS également, 1ère étape Smiley rolleyes
Salut,

Tu as une espace après le "format" de l'url woff
format ('woff')

et forcément ça ne fonctionne pas...

Sinon, c'est mieux (pas indispensable) de mettre des guillemets dans "url()"

Voilà, ça devrait vachement mieux fonctionner après Smiley smile
Administrateur
Bien joué Matthieu ! Smiley lol
validateur W3C CSS a écrit :
(ligne 4) Erreur lors de l'analyse grammaticale. ('woff');
Bonjour et merci de vos réponses que je ne vois que maintenant... ^^

Je regarde de suite mon code en fonction de vos conseils et je reviens vers vous Smiley smile


EDIT : ah ben voilà, ça fonctionne : 

@font-face {
	font-family: dancingscript;
		src: url(dancingscript.woff2) format("woff2"),
		url(dancingscript.woff) format("woff");
	font-weight: normal;
	font-style: normal;
}


Par contre, le validateur CSS ne voulait pas de mes guillemets encadrant url().

Merci beaucoup Smiley cligne
Modifié par Marie08 (02 Mar 2017 - 14:56)
Sujet clos
Aller à