Custom CSS properties in #font-face - css

Question

The body should display a handwriting font but will only do so if the comment line is uncommented.
It seems I cannot use custom properties in #font-face? Tested on FF and Chrome.
What's going on here?
: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>

Answer 1

Your original suspicion that CSS properties don't work inside #font-face is accurate. The accepted answer is incorrect and only appears to work because of a mistake (see below).
I checked in Firefox, Chrome, and Safari, and none of them accept a #font-face in which a descriptor includes a var() function. Firefox developer edition was particularly helpful, since it let me see that the #font-face rule isn't being parsed at all with font-family: var(--fontName);
I also tried using a custom property for the src descriptor, which also failed.
As far as I can tell, the CSS #font-face specification says nothing about whether custom properties should work or not. No browser has chosen to make them work. This makes considerable sense, as a single font family's source file and properties are not likely to be variable.
If you have to dynamically construct #font-face rules client-side, the best method is using the FontFace API in a script. If absolutely necessary you could even read from your CSS properties with getComputedStyle(document.body).getPropertyValue("--fontName").
The accepted answer only seems to work because it redefines the font family name in #font-face, setting it to a string with the literal value of 'var(--fontName)'. It also sets the body font-family: 'var(--fontName)'. The two strings match, so the font loads.
CSS functions like var() are NEVER evaluated inside of a string. Everything between the opening and closing quotes is evaluated literally, as this diagram from the CSS syntax spec shows. So #disinfor's code isn't referencing the --fontName: "Indie Flower"; set on :root at all.
As a demonstration, see what happens when we unquote the font-family on body, so it actually evaluates the var(). The "Indie Flower" font doesn't exist in the document, so it doesn't load, but a font named "var(--fontName)" does exist, and will load:
: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);
}
.use-the-string {
font-family: 'var(--fontName)';
}
<p>This tries to use "Indie Flower", but it doesn't exist.</p>
<p class="use-the-string">This uses the font named "var(--fontName)"</p>

Answer 2

The problem is how the font-name is actually output for the browser to read. Remove the quote marks for the root var, and add them around the call to the 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>
Edit
Here's the version with a fallback.
: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>