Le corps doit afficher une police d'écriture mais ne le fera que si la ligne de commentaire n'est pas commentée.

Il semble que je ne puisse pas utiliser de propriétés personnalisées dans @ font-face? Testé sur FF et Chrome.

Que se passe t-il ici?

:root {
  --backgroundColor: cornflowerblue;
  --textColor: white;
  --fontName: 'Indie Flower';
}

@font-face {
  font-family: var(--fontName); 
  /* font-family: 'Indie Flower'; */
  src: url(https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2) format('woff2');
}

body {
  background-color: var(--backgroundColor);
  color: var(--textColor);
  font-family: var(--fontName);
}
<p>Custom CSS properties don't work inside @font-face rule?</p>
css
2
Kolya 7 nov. 2019 à 18:49

1 réponse

Meilleure réponse

Le problème est de savoir comment le font-name est réellement sorti pour que le navigateur le lise. Supprimez les guillemets pour la racine var et ajoutez-les autour de l'appel à la variable.

:root {
  --backgroundColor: cornflowerblue;
  --textColor: white;
  --fontName: Indie Flower;
}

@font-face {
  font-family: 'var(--fontName)';
  src: url(https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2) format('woff2');
}

body {
  background-color: var(--backgroundColor);
  color: var(--textColor);
  font-family: 'var(--fontName)';
}
<p>Custom CSS properties don't work inside @font-face rule?</p>

Modifier Voici la version avec un repli.

:root {
  --backgroundColor: cornflowerblue;
  --textColor: white;
  --fontName: "Indie Flower";
  --fallBack: sans-serif;
  --fullFont: 'var(--fontName)', var(--fallBack);
}

@font-face {
  font-family: 'var(--fontName)';
  src: url(https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2) format('woff2');
}

body {
  background-color: var(--backgroundColor);
  color: var(--textColor);
  font-family: 'var(--fontName)', var(--fallBack);
}

p {
   font-family: var(--fullFont);
}
<p>Custom CSS properties don't work inside @font-face rule?</p>
2
disinfor 7 nov. 2019 à 17:22