[Résolu] @font-face et polices locales non visibles

Bonjour,
Jusqu'ici, j'ai toujours eu pour habitude de charger les webfont via un CDN comme celui de google ou via Typekit, mais je dois exceptionnellement appeler mes polices en local et ça ne fonctionne pas. Je sais pas d'où vient le problème puisque le chemin est correcte.

@font-face {
  font-family: "Open Sans";
  font-weight: 200;
  font-stretch: 100%;
  src: local("Open Sans"), url("../../Fonts5/webfonts/OpenSans-Light.woff2") format("woff2"),
	   url("../../Fonts5/webfonts/OpenSans-Light.woff") format("woff");
	}
	[class^="message-"] {font: bold 1.2em "Open Sans", Verdana, Tahoma, Arial, sans-serif;}

Modifié par Hermann (23 Feb 2024 - 00:27)

Bonjour,
"puisque le chemin est correcte"
De notre côté, on n'a aucune garantie sur ce chemin. Le code étant apparemment bon, je pencherais pour un mauvais chemin (relatif ou abolute).
Parce que tes fontes sont bien quelque part sur ton espace. C'est là qu'il faut vérifier.
Chez moi, les fontes sont directement à la racine de mon site et je n'ai pas ajouté local devant url.

Hello,

Il est possible que le souci provienne du `local` car il me semble qu'il ne suffit pas de mentionner le nom de ta famille de fonte mais qu'il faut le nom exact de la fonte sur la machine.

Plus précisément pour une graisse de 200, ce serait quelque chose du genre ` local('Open Sans Extralight'), local('OpenSans-Extralight'),`

EDIT : ohwait mais Open Sans n'existe pas en graisse inférieure à 300

EDIT : tu peux tester sans `local` pour voir ?
Modifié par Raphael (22 Feb 2024 - 17:40)

Bonjour,

Je viens de faire fonctionner le code initial avec local("Open Sans") , puis avec local("Open Sans Light") et enfin avec local("OpenSans-Light"). Ça marche dans les 3 cas : la police "Open Sans" est utilisée par le navigateur. Mais sa graisse varie.

EDIT: et comme le soulignait Raphael, on n'aura pas du 200 de toute façon.

Pour ce qui est du font-weight, bah, ça dépend de ce qu'on veut obtenir. Quand je vois un font: bold 1.2em "Open Sans", Verdana, Tahoma, Arial, sans-serif; forcément, avec le mot clé "bold", le résultat ne sera peut-être pas celui attendu.

Enfin, il faut bien sûr vérifier que "Open Sans" a bien été installée en local sur la machine qu'on utilise pour naviguer.

EDIT: j'ai aussi vérifié que le navigateur n'avait pas cherché à télécharger la police depuis le serveur.

EDIT2: et c'était quoi, le symptôme qui permettait de dire que "ça ne fonctionne pas" ?

Amicalement,
Modifié par parsimonhi (22 Feb 2024 - 18:44)

parsimonhi a écrit :

EDIT2: et c'était quoi, le symptôme qui permettait de dire que "ça ne fonctionne pas" ?

Le "symbole" tu veux dire ?

L'astuce était de caser n'importe quel émoji dans local, par ex. `local( )` pour - justement - interdire au navigateur de récupérer la fonte sur sa machine… pour éviter d'avoir un ancien fichier obsolète en cache.

Re, merci pour les réponses successives, notamment la graisse minimale (Raphael) et les divers tests parsimonhi.

Bon ben je cris que je sais d'où ça vient, et j'aurais dû le vérifier avant, désolé : dans la console, ce message apparait

a écrit :
Failed to decode downloaded font.
OTS parsing error: invalid sfntVersion: 168430090

Problème résolu avec une autre font.

Au passage si vous connaissez un convertisseur TTF > WOFF2, je suis preneur.
Modifié par Hermann (23 Feb 2024 - 00:29)

Hermann a écrit :

Au passage si vous connaissez un convertisseur TTF > WOFF2, je suis preneur.

- Font Squirrel : https://www.fontsquirrel.com/tools/webfont-generator
- Transfonter : https://transfonter.org/
- Glyphhanger, le plus complet (et complexe) de tous, inclut aussi les Variable Fonts : https://github.com/zachleat/glyphhanger
- Plusieurs outils online comme celui-ci : https://cloudconvert.com/ttf-to-woff2

Ok super ! Merci Raphael