Discussion :

[soeursourire]

Bonjour,

Je suis en train de mettre les mains dans le code CSS d'un ancien employé et son code me parait étrange.
Il a déclaré plusieurs font Soho Gothic W01 avec des weight et style différents mais il leur a donné à toutes le même nom de famille "Soho Gothic W01".
Du coup si je déclare mon body avec comme nom de famille "Soho Gothic W01" et "font-style:italic" que se passe-t-il vraiment? Il va chercher la 1ère déclaration de font appelé "Soho Gothic W01" et il va la mettre en italique non? Il ne va pas aller chercher la font Soho Gothic W01 qui a le même font-style si?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
@font-face {
  font-family: Soho Gothic W01;
  src: url("f/ffd26669-f0a3-4cbe-a017-23c02aa3d08f.woff") format('woff'), url("f/0cc9c875-1513-408b-a4c7-af71ca927610.svg#0cc9c875-1513-408b-a4c7-af71ca927610") format('svg');
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: Soho Gothic W01;
  src: url("f/a0114540-d190-471b-ae6e-7e9cca87b912.woff") format('woff'), url("f/aeb14bf7-dec1-4234-9ddc-624c8a36bbc4.svg#aeb14bf7-dec1-4234-9ddc-624c8a36bbc4") format('svg');
  font-style: italic;
  font-weight: 700;
}

Merci.

[David Boring]

Cette approche est la bonne.
Si tu demande la variation italic, c'est bien la font avec le font-style:italic qui sera employé, la deuxième donc.
Et non la première, heureusement car tu aurais alors un italic généré par le navigateur.
Bon, par contre, c'est une version qui possède un font-weight specific.

Si tu veux une italic avec un font normal normal, tu dois ajouter une font-face déclaration.

[soeursourire]

D'accord, merci. Je viens de tester effectivement cela veut dire qu'il faut tout déclarer.
Mais du coup je regardais ça parce qu'on a eu un audit disant que l'on chargeait beaucoup trop de fonts (une quinzaine), ce qui ralentit le site: normal 400, normal 500, italic 400, etc.
Dans ce cas il faudrait que je réduise à 3 ou 4 alternatives je suppose et qu'on s'y tienne...

[soeursourire]

Mais en testant je vois que si je n'en déclare qu'une seule (ci-dessous), alors les font-weight et font-style fonctionnent quand même mais là du coup je suppose que je transforme la font au lieu de charger la font correctement?:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
@font-face {
  font-family: Soho Gothic W01;
  src: url("f/ffd26669-f0a3-4cbe-a017-23c02aa3d08f.woff") format('woff'), url("f/0cc9c875-1513-408b-a4c7-af71ca927610.svg#0cc9c875-1513-408b-a4c7-af71ca927610") format('svg');
  font-style: normal;
  font-weight: 400;
}

[Invité]

Bonjour,

trouvé sur le net :

• Bonnes pratiques pour les déclarations @font-face (voir : "Les alternatives")
• MDN - @font-face (voir : "Compatibilité des navigateurs")

Ca devrait répondre à tes questions.

N.B. Les noms de polices avec des espaces doivent être déclarées entre "..." :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

font-family: "Soho Gothic W01";

[David Boring]

Mais en testant je vois que si je n'en déclare qu'une seule (ci-dessous), alors les font-weight et font-style fonctionnent quand même mais là du coup je suppose que je transforme la font au lieu de charger la font correctement?

Tout à fait, le rendu italic ou la largeur de la police est fait par le browser, très mauvaise pratique.
Et oui, tu as beaucoup trop de variation de font.
Essaye de te passer de l'italic, c'est illisible de toute façons
tu devrais avoir
- regular
- bold

et une thin ou extra bold à la limite
Mais si tes designers ont besoin de 5 font-weight variations, c'est qu'il y a un problème dans leur façon de travailler

[soeursourire]

Oui y'a pas vraiment eu de charte graphique au départ... Je pense qu'ils ont pas vraiment fait ça dans les règles de l'art :-)
Merci en tout cas!