[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