I'm having trouble implementing custom fonts on my website. Despite following the correct file structure, the fonts do not seem to be loading.
My project files are organized in the following manner:
https://gyazo.com/5ee766f030290e5b2fa42320cc39f10b
Within my CSS file:
@font-face {
font-family: 'anuratiregular';
src: url('public/css/fonts/Anurati-Regular.otf') format('otf'),
url('public/css/fonts/Anurati-Regular.otf') format('otf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'onedayregular';
src: url('public/css/fonts/ONEDAY.otf') format('otf'),
url('public/css/fonts/ONEDAY.otf') format('otf');
font-weight: normal;
font-style: normal;
}
.section-1-header {
font-family: anuratiregular;
}
Meanwhile, in my JS file:
const express = require("express");
const app = express();
const path = require('path');
//Starts the server and allows it to Listen
//on port 3000 for any traffic
app.listen(3000, function() {
console.log("Listening on Port 3000");
});
app.use(express.static(path.join(__dirname, 'public')));
//delivers index.html file when people navigate
//to the root page
app.get("/", function(req, res) {
res.sendFile(__dirname + "/html/index.html");
});
This is how I have linked the CSS file within my HTML document. Other styles are functioning correctly, so this inclusion should be accurate.
<link rel="stylesheet" href="css/index.css">
Upon inspecting my development tools, I encountered the following error:
GET http://localhost:3000/css/public/css/fonts/Anurati-Regular.otf net::ERR_ABORTED 404 (Not Found) :3000/css/public/css/fonts/Anurati-Regular.otf:1