Declarer fonts, font face obligatoire?

bonjour,

je voudrais savoir comment ben declarer des polices dans mon css
1:dois je mettre dans la feuille de style
puis je appeler directement une police woff2 ainsi?

body {    font-family:mafont, cursive;src: url("../fonts/mafont.woff2");}

ou dois je d'abord dans la feuille de style l'appeler par font face

comme ceci?

@font-face {
    font-family: mafont, cursive;
    src: url("../fonts/mafont.woff2");
}
body {    font-family:mafont, cursive;}

je vois que les deux fonctionnent, le premier est-il correcte ou faut il tjr font-face qd il y a src?

merci

merci raphael
par contre soucis avec csslint avec

@font-face {
    font-family: mafont, cursive;
    src: url("../fonts/mafont.woff2");
}
body {    font-family:mafont, cursive;}

voici le message de css lint

Use the bulletproof @font-face syntax @font-face declaration doesn't follow the fontspring bulletproof syntax.

où est le probleme?
merci

nantais a écrit :
par contre soucis avec csslint

Avant d'en arriver à CSSlint, tu as un problème : lorsque tu nommes une fonte avec @font-face, elle ne peut avoir qu'un seul nom (ex. "font-family: mafont;"), or chez toi elle a deux noms ("font-family: mafont, cursive;") ce qui ne fonctionne pas.
Par la suite, rien ne t'empêche de l'appliquer sur tes éléments en écrivant font-family: mafont, cursive; c'est à dire "le nom de ta fonte" + "les alternatives", ici cursive.

Pour ce qui est de CSSlint, la "Bulletproof @font-face" correspond à une ancienne syntaxe décrite ici : https://github.com/CSSLint/csslint/wiki/bulletproof-font-face
Cette syntaxe était à l'époque (du temps de IE8) considérée comme "fonctionnelle partout" car elle incorporait tout un tas de formats : .ttf, .eot, .woff, .woff2, etc.

De notre côté nous avons laissé tomber cette syntaxe depuis un bout de temps et ne servons plus que deux formats de police : .woff2 et .woff en alternative, ce qui couvre environ 97% des usagers. Les autres se contenteront de la police système.

Bonne journée
Modifié par Raphael (23 Oct 2017 - 08:52)