Why doesn't @font-face include the font?

Question

css

The @font-face directive just doesn't include the font, no errors, no nothing.
Already simplified everything as soon as I could, but I still can not find the root of the problem.
The resulting file structure is:
node_modules
public
      index.css
      Lato-Bold.ttf
views
      index.pug
app.js
package.json
index.css

@font-face {
  font-family: Lato;
  src: url(Lato-bold.ttf);
}

index.pug

doctype html
html
  head
    meta(charset='utf-8')
    title Document

    link(rel='stylesheet' href='./index.css')
  body

app.js

const express = require('express');

const app = express();

app.set('views', 'views');
app.set('view engine', 'pug');

app.use(express.static('public'));

app.get('/', (request, response) => response.render(''));

app.listen(8040);

package.json

{
  "dependencies": {
    "express": "^4.16.3",
    "pug": "^2.0.3"
  }
}

Networks is empty

Answer 1

The @font-face rule is designed to allow lazy loading of fonts, fonts are only downloaded when needed for use within a document. a stylesheet can include @font-face rules for a library of fonts of which only a select set are used; user agents must only download those fonts that are referred to within the style rules applicable to a given page. User agents that download all fonts defined in @font-face rules without considering whether those fonts are in fact used within a page are considered non-conformant.
In general, it was a stupid idea to check font loading only through devtools, without applying these fonts anywhere.

Answer 2

Have you tried this format?

@font-face {
  font-family: ProximaNova-Light;
  src: url(../font/ProximaNova/ProximaNova-Light.otf) format("opentype");
}