27191 sujets

CSS et mise en forme, CSS3

Bonjour,

Le site d'Arte utilise Barna Stencil (voir le titre "une femme d'exception").


@font-face{font-family:'barna-stencil';src:url("//static-cdn.arte.tv/static/fonts/barna-stencil-web/woff2/BarnaStencil-Regular.woff2") format("woff2"),url("//static-cdn.arte.tv/static/fonts/barna-stencil-web/woff/BarnaStencil-Regular.woff") format("woff");font-weight:normal;font-style:normal}


Je ne comprends pas pourquoi le woff apparait differement chez moi quand j'intègre le @font-face dans une page html.

upload/1578848404-1331-barna.png
Modifié par deep (12 Jan 2020 - 18:00)
Administrateur
Hello,

Le fichier .woff est hébergé chez toi ?
Tu as renseigné quelle URL dans le @font-face ?
Tout simplement parce que tu n'a pas cette fonte sur ton ordinateur.
Lorsque nous utilisons une fonte très peut connue nous devons la définir
dans notre header et la déposer sur notre serveur.
Il est même possible pour que le fichier soit plus léger de n'y mettre que les caractères utilisés.
Voila !
Houp's excuses j'avais pas vu ta réponse Smiley confused
Modifié par Jean-Pierre-Bruneau (13 Jan 2020 - 09:40)
Raphael a écrit :
Hello,

Le fichier .woff est hébergé chez toi ?
Tu as renseigné quelle URL dans le @font-face ?


oui, tout est en local.

@font-face{font-family:'barna-stencil';src:url("BarnaStencil-Regular.woff2") format("woff2"),url("BarnaStencil-Regular.woff") format("woff");font-weight:normal;font-style:normal}
html {background: #262626;color:white;}
h1 {font-family: "barna-stencil",Arial,sans-serif;font-style: normal;font-weight: 800;color: inherit;text-rendering: optimizeLegibility;}
Administrateur
Curieux.

Les fichiers sont dans le même répertoire que ton fichier CSS ?
Si tu remplaces Arial par une autre alternative telle que Cursive, cela change quelque chose ?
merci de ta promptitude Raphaël, oui même path, et cursive ne change rien… si tu regardes la capture dans le premier post, tu peux voir que barna se charge bien dans mon @font-face mais il manque les stries (petit sillons) dans les lettres.
Administrateur
C'est peut-être un problème dans le fichier de police. Tu as essayé de le récupérer à partir d'une autre source ?
oui depuis les premières lignes de la feuille, c'est bien la première fois que j'ai un conflit avec woff/woff2. A moins qu'ils utilisent js pour "injecter" cet effet ?