Почему @font-face не подключает шрифт?

Question

[Vladimir Skvortsov]

Директива @font-face просто не подключает шрифт, без ошибок, без ничего.

Уже упростил все как только мог, но так и не могу найти корень проблемы.
Получилась следующая файловая структура:

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 пуст

Comments

[Дмитрий]

то, что файл называется Lato-Bold
а в css указываете Lato-bold
имеет значение для вашей ОС? Имею ввиду регистр букв

Answer 1

[Vladimir Skvortsov]

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.

В общем, проверять загрузку шрифтов только через devtools, нигде не применив эти шрифты, было глупой идеей.

Answer 2

[SANYAAAASSSS]

Пробовали в таком формате?

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