[Résolu] @font-face qui ne s'active pas

Général
1

Bonjour,
En remplacement du plugin WebFonts qui n’est pas compatible avec Spip4, j’essaie d’utiliser directement la spécification @font-face mais elle n’est pas reconnue sur mon site http://keraluc.com/.
Mes fonts « Kotta One » pour le slogan du site et les titres et « Roasario » pour le texte ne s’affichent pas.
Pourtant mes fonts sont bien dans un dossier « fonts » dans le sous-dossier « css » du dossier « squelette ».
Sur ma feuille de style :
@font-face {
font-family: ‹ nom de la font ›;
src: url(’…/fonts/nom du fichier de font’);
}
font-family: ‹ nom de la font › ;

Je précise que cela fonctionne bien dans un répertoire « bac à sable » hors de Spip.

2

Il faut alors utiliser la balise #CHEMIN (#CHEMIN - SPIP) pour spécifier l’URL de la ressource, quelque chose du genre, de mémoire…

...
src: [url((#CHEMIN{fonts/nom du fichier de font}))];
3

Cela ne fonctionnera que si la CSS en question est calculée par un squelette :wink:

4

Salut, la règle à utiliser est alors :

@font-face {
font-family: ‹ nom de la font ›;
src: url('fonts/nom du fichier de font’);
}

Pas besoin de remonter d’un niveau dans le chemin du fichier, puisque le dossier fonts est au même niveau que tes CSS :wink:

5

En effet, désolé ! :-/

6

Hello

D’abord je vois 3 points devant le / au lieu de 2, peut-être une erreur de copier-coller
Ensuite si tes fonts sont dans /squelettes/css/fonts, sans doute faudrait-il écrire
src: url(’…/css/fonts/nom du fichier de font’);

7

oui c’est une erreur car j’ai bien 2 points avant /fonts

dans mon « bac à sable » hors Spip : http://bacasable.koadsale.fr/
cela fonctionne bien alors pourquoi avec Spip non ?

8

Je pense que c’est le
font: inherit;
qui se trouve dans reset.css (ligne 23) qui empêche ta police de s’afficher.

9

Il faudrait aussi enlever les apostrophes de
font-family: 'Rosario', 'Helvetica Neue', Helvetica, Arial, sans-serif;
et de
font-family:'Kotta One', serif ;

10

J’ai essayé en supprimant
font: inherit
puis en supprimant les guillemets droits simples et cela ne permet hélas pas de résoudre ce problème d’affichage des polices de caractères.

11

Je ne vois aucun changement dans tes feuilles de style.

12

Oui car après avoir testé les changements sans succès j’ai annulé les modifications

13

Bonjour
Le pb principal c’est le chemin indiqué pour les polices.
La réponse avait été donnée par bb :
Remplacer src: url(’…/fonts/nom du fichier de font’);
Par src: url('fonts/nom du fichier de font’);

Après, il y a des « guillemets simples » pour le nom des polices dans plusieurs fichier CSS :
http://keraluc.com/squelettes/css/layout.css
http://keraluc.com/squelettes/css/typo.css

14

Attention, un détail sur les noms de famille:

Les noms de familles qui comportent des blancs doivent être encadrées par des doubles quotes (").

Et non pas de simples quotes. Voir font-family - CSS : Feuilles de style en cascade | MDN

15

J’insiste… http://keraluc.com/squelettes/css/typo.css contient toujours url('../fonts/rosario-v27-latin-regular.woff2') format('woff2') => url('fonts/rosario-v27-latin-regular.woff2') format('woff2') fonctionnera bien mieux…

16

Merci pour l’attention porté à mes soucis mais hélas les changements préconisés ne permettent pas de régler mon problème

17

Merci pour ce conseil mais hélas ce changement préconisé ne permet pas de régler mon problème

18

Bah en fait, si.
Depuis ton site, avec l’inspecteur de mon navigateur, si je change le chemin des polices, et si j’enlève les guillemets simples, les polices désirées s’affichent…

19

Je te confirme le contraire, la typo Rosario est bien chargée et affichée, cf la capture des outils de dev de firefox :

image

20

Pas chez moi ???
non_affichage_rosario