Not able to load .ttf in React - reactjs

Question

It throws DOM EXCEPTION
styles file
import { fontUrls1 } from './Fonts/Amaranth-Bold.ttf';
const GlobalStyle = createGlobalStyle`
#font-face {
font-family: 'Amaranth-Bold';
src: url('${fontUrls1}') format('truetype');
}
body {
font-family: 'Amaranth-Bold';
}
body.fontLoaded {
font-family: 'Amaranth-Bold' ;
}'
My app.js file
const openUberMoveLightObserver = new FontFaceObserver('Amaranth-
Bold',{});
Executing this line throws an error.
openUberMoveLightObserver.load().then(() => {
document.body.classList.add('fontLoaded');
});
Uncaught (in promise) DOMException

Answer 1

You don't need to import fonts to add into styles....
You can do this just passing url to the fonts
like this.....
export const MyFonts = createGlobalStyle`
#font-face {
font-family: 'Metropolis';
src: url(/static/fonts/Metropolis-ExtraLight.ttf);
src: url(/static/fonts/Metropolis-Light.ttf);
src: url(/static/fonts/Metropolis-LightItalic.ttf);
src: url(/static/fonts/Metropolis-Medium.ttf);
src: url(/static/fonts/Metropolis-Regular.ttf);
src: url(/static/fonts/Metropolis-SemiBold.ttf);
}
`;
OR
export const MyFonts = createGlobalStyle`
#import url('/static/fonts/Metropolis-ExtraLight.ttf');
#import url('/static/fonts/Metropolis-Light.ttf');
#import url('/static/fonts/Metropolis-LightItalic.ttf');
#import url('/static/fonts/Metropolis-Medium.ttf');
#import url('/static/fonts/Metropolis-Regular.ttf');
#import url('/static/fonts/Metropolis-SemiBold.ttf');
`;
you can use this font by importing inside your component
import React from 'react';
import MyFonts from './MyFonts';
function Example(){
return (
<div>
<MyFonts />
....
</div>
)
}
export default Example

Answer 2

You need to add a specific loader to load the font. For example if you are using webpack then you can use url-loader as below:
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
exclude: path.resolve(__dirname, "node_modules"),
use: [
{
loader: "url-loader",
options: {
prefix: "font",
limit: 10000,
mimetype: "application/octet-stream"
}
}
] }