ReactJS web font - reactjs

Question

I have some problem with web font .
I am get font link from api . How can I use that font in render method ?
componentDidMount() {
axios.get(URL_FONT)
.then((resp) => {
this.setState({
fontData: resp.data.data
});
}).catch(() => {
console.log("Error_006");
});
}
render(){
return(
{ this.state.fontData.map((item, index)=>{
<span key={index} style={{fontFamily: item.name}}>
{item.name}
</span>
})
)
}
actual question is - is there any way to use #font-face dynamically?
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}

Answer 1

You can use WebFontLoader to set font dynamically:
https://github.com/typekit/webfontloader

Answer 2

I am find the answer (source Dynamically Loading Fonts with Javascript
)
const addFont = new FontFace(
yorFontName, yorFontUrl,
{"font-display": "block", weight: "normal"} // odere props
);
addFont.load()
.then(function (loaded_face) {
document.fonts.add(loaded_face);
})
.catch(function (error) {
console.log(error);
});

Answer 3

#Tigrank solution works for CDN fonts(Like Google fonts), but if you want use them in your code and not CDN ones, (Some project run while have not access to internet, then resources must accessible through internal network)
Create a fonts directory inside src
Copy your font files to fonts
In index.js import './fonts/FontFILE.ttf';
other font format is so applicable(wof/wof2/svg).
Repeat step 3 for all your fonts
Add this CSS code for every font file:
/* FONT NAME */
#font-face {
font-family: 'FONT_NAME';
src:
url('../fonts/FONT-NAME.ttf') format('truetype');
/*
For other font file formats:
src:
url('../fonts/WOF2-Font.woff2') format('woff2'),
url('../fonts/WOF-Font.woff') format('woff'),
url('../fonts/TTF-Font.ttf') format('truetype');
*/
font-weight: normal;
font-style: normal;
}
Repeat step 5 for every font file too.