Set CSS variable with quotes and comma from JavaScript

Question

I have the following CSS:

:root{
  --font-family: "Times", serif;
}

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

I also have a dropdown with the following values:

serif
sans-serif
'Montserrat', sans-serif;
'Source Code Pro', monospace;

I use this dropdown to set a CSS variable on the body:

let root = document.documentElement;

const fontSelect = document.querySelector("#font")

fontSelect.addEventListener("change", e => {
  console.log(fontSelect.value);
  root.style.setProperty('--font-family', fontSelect.value);
});

Each time, the correct console log happens, however only serif and sans-serif are being applied in Google Chrome. How can I make 'Montserrat', sans-serif; work?

https://codepen.io/EightArmsHQ/pen/3405e40daa7fcc7b17ff8a0e6a205b66

@Reyno ah yeah that works, thank you. If you'd like to answer with that I'll mark it correct. — Djave
– Djave, Commented Jan 25, 2022 at 15:57

StackByMe · Accepted Answer · 2022-01-25 16:00:06Z

2

You need to remove the ; from your values to make it valid.

let root = document.documentElement;

const fontSelect = document.querySelector("#font")

fontSelect.addEventListener("change", e => {
  console.log(fontSelect.value);
  root.style.setProperty('--font-family', fontSelect.value);
});

:root{
  --font-family: "Times", serif;
}

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

<select id="font">
  <option value="serif">Serif</option>
  <option value="sans-serif">Sans serif</option>
  <option value="'Montserrat', sans-serif">Montserrat</option>
  <option value="'Source Code Pro', monospace">Source Code Pro</option>
</select>

answered Jan 25, 2022 at 16:00

StackByMe

6,57522 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Set CSS variable with quotes and comma from JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related