JSFiddle - React, Tailwind, and code Playground

HTML

<link href='http://fonts.googleapis.com/css?family=Averia+Libre' rel='stylesheet' type='text/css'>
<link href="http://client.plaveb.com/champrosports/CSS/canvasFont.css" rel="stylesheet" type="text/css" />
<select>
<option value="" style="font-family: 'Averia Libre';">I'm a custom font.</option>
<option value="" style="font-family: 'cancun'!important;">Hey me too!</option>
<option value="">Averia Libre</option>
</select>

CSS

@font-face {
  font-family: 'Averia Libre';
  font-style: normal;
  font-weight: 400;
  src: local('Averia Libre Regular'), local('AveriaLibre-Regular'),
  url('http://themes.googleusercontent.com/static/fonts/averialibre/v1/rYVgHZZQICWnhjguGsBspHhCUOGz7vYGh680lGh-uXM.woff') format('woff');
}
@font-face {
    font-family: 'cancun';
    src: url('http://client.plaveb.com/champrosports/fonts/cancun_0-webfont.eot');
    src: url('http://client.plaveb.com/champrosports/fonts/cancun_0-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://client.plaveb.com/champrosports/fonts/cancun_0-webfont.woff') format('woff'),
         url('http://client.plaveb.com/champrosports/fonts/cancun_0-webfont.ttf') format('truetype'),
         url('http://client.plaveb.com/champrosports/fonts/cancun_0-webfont.svg#cancun') format('svg');
    font-weight: normal;
    font-style: normal;
}

select {
    font-size: 20px;
    /*font-family: 'Averia Libre', cursive;*/
    background: url(http://www.greenriverworks.com/elements/borders/green_button_background_over.jpg) repeat-x;
    width: 400px;
    /*font-family: 'Averia Libre';*/
}