seeking UI to set @font-feature-settings accumulatively

Question

On this page I am trying to let a user select various @font-feature-settings that are built into the font that is displayed.

I have tried doing it using only html and CSS checkboxes, but the problem in that approach is that the various states are mutually exclusive. My goal is, however, that all possible options should be accumulative and it should be possible to randomly combine features. For example, it should be possible to activate @font-feature-settings 'ss01' and 'ss10' simultaneously.

I have now tried to do it using Java Script, but unfortunately I am completely new to it and struggle to make any progress. I found this: font-feature-settings features activated using javascript But cannot see how I can adapt it to my needs. Any pointers?

Answer 1

You can set multiple feature settings using CSS variables:

1. define default property values (0 = deactivated)

:root{
  --cv03: "cv02" 0;
  --cv03: "cv03" 0;
  --smcp: "smcp" 0
}

2. apply font-features to element
   CSS variables act as placeholders for each feature.

p{
    font-size: 5em;
    font-feature-settings: var(--cv02), var(--cv03), var(--smcp);
}

3. toggle features via JS

let inputsFeature = document.querySelectorAll('.inputFeature')

inputsFeature.forEach(input=>{
  
  input.addEventListener('change', e=>{
    let current = e.currentTarget;
    let feature = current.dataset.feature;
    if(current.checked){
      // activate
      document.documentElement.style.setProperty(`--${feature}`, `'${feature}'`)
    }else{
      // deactivate
      document.documentElement.style.setProperty(`--${feature}`, `'${feature}' 0`)
    }
  })
})

:root{
  --cv02: "cv02" 2;
  --cv03: "cv03" 0;
  --smcp: "smcp" 0;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/sourcesans3/v15/nwpStKy2OAdR1K-IwhWudF-R7w0QZMrc9HY.woff2) format('woff2');
}

body {
  font-family: 'Source Sans 3';
}

p{
    font-size: 5em;
    font-feature-settings: var(--cv02), var(--cv03), var(--smcp);
}

<label><input data-feature="smcp" class="inputFeature" type="checkbox" value="1">smcp</label> 
<label><input data-feature="cv02" class="inputFeature" type="checkbox" value="1" checked>cv02</label> 
<label><input data-feature="cv03" class="inputFeature" type="checkbox" value="1">cv03</label> 

<p>Hamburgffi 0123</p>