OTS parsing error when serving an Angular project with ExpressJS

I have an Angular project and ExpressJS webserver which serves the Angular project.

I used a custom font in Angular, created a font-face like this:

@font-face {
font-family: 'Branda';
src: url('../public/fonts/Branda-yolq.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}


If I check the angular project locally (with ng serve), the font is appearing. But if I build the project (ng build), and copy the dist folder to the webserver, and start, the font is not loading. I get the following error:

Failed to decode downloaded font: http://localhost:5000/media/Branda-yolq-PC7QOVZG.ttf OTS parsing error: invalid sfntVersion: 1008821359

Here is my webserver's app.js:

const express = require("express");
const path = require("path");
const app = express();
const port = 5000;
var cors = require('cors');

app.use(cors({
origin: [ 'https://localhost:4200' ]
}));
app.use(express.json());
app.use(
express.urlencoded({
extended: true,
})
);

app.get('*', (req, res) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
var pattern = new RegExp('(.css|.html|.js|.ico|.jpg|.jpeg|.png)+$', 'gi');
if (pattern.test(req.url)) {
res.sendFile(path.resolve(__dirname, `dist/istivirag/browser${req.url}`));
} else {
res.sendFile(path.resolve(__dirname, 'dist/istivirag/browser/index.html'));
}

});

var feedbackRouter = require('./routes/feedback');
app.use('/api/feedback', feedbackRouter);

app.listen(port, () => {
console.log('Example app running on port ${port}');
});

module.exports = app;


I saw a bunch of questions like this, but nothing seems to solve my problem. Any ideas?

Continue reading...