css - OTS parsing error when serving custom font in an Angular project with ExpressJS - Stack Overflow

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?