title: How to use font-face font family in react component render?
body: <p>index.css</p>
  
  <pre><code>  @font-face{
      font-family:"Bauhaus";
      src:local('BAUHS'),
        url('./BAUHS.ttf') format('truetype');
    }
  </code></pre>
  
  <p>I want to use the  "Bauhaus" font in my react component index.js file based on certain condition. Could you please help how to use it.</p>
  
  <p>Here is my code:</p>
  
  <pre><code> import './index.css';
   class NameForm extends React.Component {
     constructor(props) {
        super(props);
        this.state = {fontFamilyName: ''};
  
        this.handleChange = this.handleChange.bind(this);
     }
      handleChange(event) { 
       this.setState({fontFamilyName: event.target.value});
      } 
      render() { 
        return ( 
              &lt;div&gt; 
                  &lt;select onChange={this.handleChange}&gt;
                     &lt;option value='Arial'&gt;Arial&lt;/option&gt;
                     &lt;option value='Bauhaus'&gt;Bauhaus&lt;/option&gt;
                     &lt;option value='Times New Roman'&gt;Times New Roman&lt;/option&gt; 
                  &lt;/select&gt; 
                  &lt;p style={{fontFamily:this.state.fontFamilyName}}&gt;Some Text here&lt;/p&gt;
              &lt;/div&gt; ); 
       }
     }
  </code></pre>