CODEWITHSUNDEEP
javascriptcssnode.jsexpressfonts
firewire167
firewire167

Reputation: 139

node.js fonts not working properly and showing no errors

I'm trying to build a website that uses custom fonts but when I try to use them nothing happens.

My files are laid out like this:

https://gyazo.com/5ee766f030290e5b2fa42320cc39f10b

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;
}

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");
});

Here is how I am including the CSS file in my HTML. Other styles are applying properly so it should be fine.

<link rel="stylesheet" href="css/index.css">

I get this error in my dev tools:

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

Upvotes: 0

Views: 3496

Answers (2)

reachtokish
reachtokish

Reputation: 356

You have to generate web font from that otf file. Use online tool like https://www.fontsquirrel.com/tools/webfont-generator or https://everythingfonts.com/font-face. There only you will get a specimen files where the generated fonts files and css file you will get. Copy the css from the css file and place the font files in the correct path as css path.

Upvotes: 0

user12251171
user12251171

Reputation:

Your src formats are incorrect, .otf files use format('opentype'). From MDN:

The available types are: "woff", "woff2", "truetype", "opentype", "embedded-opentype", and "svg".

Upvotes: 1

Related Questions