[Résolu] Comment gérer les webfonts en Spip 4.3.x ?

Bonjour,

Sur l’un de mes site SPIP 4.3.6, une webfont ne se charge pas.

Dans les squelettes d’un de mes sites, j’ai fais un appel de webfont (plus particulièrement de Google Fonts) en tête de mon fichier perso.css:

/*Roboto : Google Font des Chapeaux, Corps de texte et Dates*/
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');

Peut-être l’ai-je fais de travers dès le départ ou bien le fonctionnement de Spip à évolué, toujours est-il que la font Roboto ne se charge pas.

Donc:

  • soit, je l’ai mal codé,
  • soit, il faut le faire dans le fichier font.css et, dans ce cas de figure, comments?

Merci d’avance,

Cordialement,

Hervé

Bonjour,
Il faudrait voir la page en question… Peu de chance qu’il s’agisse d’un problème lié à Spip.

Bonjour
perso j’appelle les Google fonts comme ça dans le head

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,500;0,700;1,400&family=Roboto:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> 

Il est bien plus propre et respectueux de la vie privée des internautes d’utiliser des webfonts hébergées directement sur le site. Il existe des outils pour récupérer les fonts de google, perso j’utilise celui-ci google webfonts helper

2 « J'aime »

merci, je connaissais pas

Merci pour le conseil, mais, chez moi, ça ne fonctionne pas:

L’ai-je fais comme il faut?

Les fichiers des fonts woff2 récupérer depuis « google webfonts helper » sont dans /squelettes/fonts/ et dans le dossier /squelettes/css/, j’ai testé sans succès l’ajout du code généré par « google webfonts helper » (voir ci-dessous avec l’exemple d’une des variantes de Roboto) d’abord dans font.css, puis, ensuite, en tête de perso.css.

voici le code ajouté:

/*code généré depuis "google-webfonts-helper" (https://gwfh.mranftl.com/fonts/)*/ 
/* roboto-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/roboto-v47-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

J’ai recalculé la page et vidé le cache du navigateur et le cache de spip.
Me suis-je trompé quelque part?

Merci d’avance,

Hervé

Chez moi, depuis squelettes/css/fonts.css j’appelle une font posée dans squelettes/css/fonts/ avec src: url('fonts/xxx.woff2') et ça fonctionne.

J’ai trouvé!

ça venait d’une incohérence dans les classes CSS du fichier perso.css:
à un ou deux endroit, il y avait
‹ Roboto ›, Helvetica, Arial, sans-serif;
au lieu de
‹ Roboto ›, sans-serif;

C’est le problème induit par une évolution des CSS par petites touches, si l’on y prend pas garde, on oubli des modifications au passage.

Merci en tout cas, notamment pour m’avoir fait découvrir « google webfonts helper » et pour le temps consacré à m’avoir aider.

Cordialement,

Hervé

Roboto étant en première position, c’est elle qui devrait être utilisée.
Les chevrons me posent question : il faudrait :
font-family: Roboto, Helvetica, Arial, sans-serif; ou
font-family: 'Roboto', Helvetica, Arial, sans-serif;