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?
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
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?
ç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.
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;