Font in var() model like colors

[codeispoetry]

:root {
	--black: #000000;
	--white: #FFFFFF;
	--theme: #ED0089;
	--color4: #F7F7F7;
}

When I use reproducable colors like this. How can I use font-family with this model?

font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;: for example.

[John_Betong]

@codeispoetry

font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; : for example.

Did you try:

—font-family: ‘ “Source Sans Pro", Helvetica, Arial, sans-serif’;

//

font-family: var(—font-family);

[codeispoetry]

@John_Betong

Did you try:

Like this:

--helvetica: ‘“Source Sans Pro", Helvetica, Arial, sans-serif’;

?

[John_Betong]

Did the script produce the desired results and validate?

[codeispoetry]

No. It doesn’t.

[John_Betong]

I was unable to test on the tablet and the CSS Validator is not responding?

https://jigsaw.w3.org/

[Archibald]

Try:

:root{
  --font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
}

p{
  font-family: var(--font-family);
}

[DaveMaxwell]

Archibald’s format works.

And PLEASE don’t use a font name for a font-variable if that’s not going to be the font that’s going to be displayed. That will cause you headaches down the road, I guarantee it. Depending on what’s installed on a person’s machine, that is not Helvetica. That will display Source Sans Pro, then Helvetica then Arial then fall back to a san-serif font

--helvetica: “Source Sans Pro", Helvetica, Arial, sans-serif;

[codeispoetry]

This doesn’t seems to be working in my case:

However, If I put this directly in body, then, it does work:

font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;

[DaveMaxwell]

There must be something else going on then and you have another selector below that line which sets the font to something else.

If you go into developer mode and look at the font-generated, what selector is setting the font?

[codeispoetry]

That root definition of font is negated in the browser →

Update: Inverted comma was an issue. Now fixed.

Now: --sourcesans: "Source Sans Pro", Helvetica, Arial, sans-serif;
Previous: --sourcesans: “Source Sans Pro", Helvetica, Arial, sans-serif;