How to use font-face font family in react component render?

Question

index.css

  @font-face{
    font-family:"Bauhaus";
    src:local('BAUHS'),
      url('./BAUHS.ttf') format('truetype');
  }

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.

Here is my 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 ( 
            <div> 
                <select onChange={this.handleChange}>
                   <option value='Arial'>Arial</option>
                   <option value='Bauhaus'>Bauhaus</option>
                   <option value='Times New Roman'>Times New Roman</option> 
                </select> 
                <p style={{fontFamily:this.state.fontFamilyName}}>Some Text here</p>
            </div> ); 
     }
   }

I have used font family like <p style={{fontFamily:this.state.fontFamilyName}}></p> in my component. Here this.state.fontFamilyName is dymanically getting based on condition. — user3278227
– user3278227, Commented Jun 21, 2018 at 10:24
You are expecting the value from your traget but, see it's undefined. Try to pass value attribute in option like value='Arial' . — Gaurav Paliwal
– Gaurav Paliwal, Commented Jun 21, 2018 at 10:59

Paolo Dell'Aguzzo · Accepted Answer · 2018-06-21 11:47:08Z

3

Remember that "truetype" works for Safari, Android and iOS (https://css-tricks.com/snippets/css/using-font-face/).

Declare a font-face this way (just an example in one of my projects):

@font-face {
font-family: '3dumbregular';
src: url('fonts/3Dumb-webfont.eot');
src: url('fonts/3Dumb-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/3Dumb-webfont.woff') format('woff'),
     url('fonts/3Dumb-webfont.ttf') format('truetype'),
     url('fonts/3Dumb-webfont.svg#3dumbregular') format('svg');
}

Multiple formats for multiple browsers support.

In your example you miss even the "select" value. Add value to select:

<select onChange={this.handleChange} value = {this.state.fontFamilyName}>
           <option value='Arial'>Arial</option>
           <option value='Bauhaus'>Bauhaus</option>
           <option value='Times New Roman'>Times New Roman</option> 
 </select>

answered Jun 21, 2018 at 11:47

Paolo Dell'Aguzzo

1,43111 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3278227 Over a year ago

Thank You for response. I tried this but font family is not applying.

Paolo Dell'Aguzzo Over a year ago

@user3278227 could you please create a jsFiddle (or something similar) with your code?

user3278227 Over a year ago

hi, I have added my code here - jsfiddle.net/n5u2wwjg/56014 , I am checking Jenkins font family online links to run this exapmle.

Paolo Dell'Aguzzo Over a year ago

The change from Arial to Times New Roman works. The option for Jenkins should have as value 'Jenkins 2.0' because it is the font family name. You have still '3dumbregular' in SVG and there is not fonts folder

Paolo Dell'Aguzzo Over a year ago

This is a jsfiddle with your code. I have taken a font from Tumblr. In your code use the font you prefer (possibily in your font folder): jsfiddle.net/stxdovh5

Collectives™ on Stack Overflow

How to use font-face font family in react component render?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related