RwWpEWy

index.html

The font is: <select class="option" id="test" name="test">
<option value="arial">Arial</option>
<option value="uppercase">Uppercase</option>
<option value="comicsans">Comic sans (dyslexic friendly)</option>
</select>

rwwpewy.markdown

RwWpEWy

A Pen by FZs on CodePen.

License.

script.js

//Await the DOM to be loaded - just like window.onload, but triggers faster
document.addEventListener('DOMContentLoaded', ()=>{
  //Note that it's change, not onchange:
  document.getElementById("test").addEventListener('change', selectFonts)
})

//I've simplified you code a bit...
function selectFonts(){
  const element = document.getElementById("test")
  const selected = element.options[element.selectedIndex].value;

  //We do the same things for each value - so, let's simplify:

  //Remove all classes
  for(const font of ['arial', 'uppercase', 'comicsans'])
    document.body.classList.remove(font)
  //Add the active class
  document.body.classList.add(selected)
}

document.addEventListener('DOMContentLoaded', ()=>{
  document.getElementById("test").addEventListener('change', function() {
    const element = document.getElementById("test")
    const selected = element.options[element.selectedIndex].value;
    window.localStorage.setItem('test', selected)
  })

  const selected = window.localStorage.getItem('test')
  if(selected){
    for(const elem of document.getElementById("test").options){
      if(selected === elem.value){ 
        elem.selected = true
        break
      }
    }
    document.body.classList.add(selected)
  }
})

style.css

body{font-family:arial}
body.uppercase {text-transform:uppercase}
body.comicsans {font-family:comic sans ms}