I'm using create-react-app and prefer not to eject. i imported in index.html file . and give it default font. but its not working.
<style>
@font-face {
font-family: Gumela;
src: url("../src/fonts/*");
}
* {
font-family: "Gumela";
font-weight: normal;
font-size: 20px;
}
body {
margin: 0;
}
</style>
Try importing the fonts in your app.css or index.css file.
And try:
@font-face {
font-family: Gumela;
src: url("../src/fonts/*");
font-display: swap; // This will swap font once its loaded, for SEO purpose.
}
* {
font-family: Gumela;
font-weight: normal;
font-size: 20px;
OR
font: Gumela normal 20px;
}
I imported the font here: https://www.onlinewebfonts.com/download/00561b492d88a5287a5def1e83a34882 and it worked for me.
just add this in head before your style tag.
<link href="//db.onlinewebfonts.com/c/00561b492d88a5287a5def1e83a34882?family=Gumela" rel="stylesheet" type="text/css"/>
You can insert font-face on your App.css file
@font-face {
font-family: Gumela;
src: url('./fonts/Gumela\ Regular.otf');
}