webfont in option elements

by sp00n82

HTML

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<select>
  <option class="klimaweb">Font - KlimaWeb</option>
  <option class="graphweb">Font - GraphWeb</option>
  <option>Font - Default</option>
</select>

<p class="klimaweb">Font - KlimaWeb</p>
<p class="graphweb">Font - GraphWeb</p>
<p>Font - Default</p>

CSS

* {
    font-family: monospace, serif;
}

select, option, p {
  font-size: 32px;
}

select {
  font-family: "GraphWeb", serif;
}

.klimaweb {
  font-family: "KlimaWeb";
}

.graphweb {
  font-family: "GraphWeb", serif;
}

JavaScript

WebFont.load({
  custom: {
    families: ['KlimaWeb:n5,n7', 'GraphWeb:n7'],
    urls: ['https://350.org/wp-content/themes/threefifty_main/library/webfonts/fonts.css']
  },
  google: {
    families: ['Permanent+Marker::latin']
  },
  timeout: 10000
});