@northernwhale

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

Директива @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 пуст
5b3ccec7dbfc7033130125.png
  • Вопрос задан
  • 204 просмотра
Решения вопроса 1
@northernwhale Автор вопроса

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, нигде не применив эти шрифты, было глупой идеей.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@SANYAAAASSSS
Пробовали в таком формате?
@font-face {
  font-family: ProximaNova-Light;
  src: url(../font/ProximaNova/ProximaNova-Light.otf) format("opentype");
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы