Как включить шрифт в файл css

Question

У меня есть файл css, который я включил в проект Angular следующим образом:

{
  "styles" : [
        "src/assets/css/style.css"
  ],
}

В angular. json Я добавил:

"assets": [
              "src/favicon.ico",
              "src/assets"
            ],

Но в файл css загружаются файлы шрифтов, например:

src: url("assets/fonts/materialdesignicons-webfont.eot?v=1.4.57");
src: url("assets/fonts/materialdesignicons-webfont.eot?#iefix&v=1.4.57") format("embedded-opentype"), url("assets/fonts/materialdesignicons-webfont.woff2?v=1.4.57") format("woff2"),

Я получаю сообщение об ошибке:

Can't resolve 'assets/fonts/glyphicons-halflings-regular.ttf'

и многие другие, подобные этому. Как правильно решить эту проблему?

Answer 1

Вы можете добавить свой шрифт следующим образом:

@font-face {
  font-family:"Your font";
  src: url("assets/fonts/materialdesignicons-webfont.eot?v=1.4.57"),
       url("assets/fonts/materialdesignicons-webfont.eot?#iefix&v=1.4.57") format("embedded-opentype"),
       url("assets/fonts/materialdesignicons-webfont.woff2?v=1.4.57") format("woff2");
}

Надеюсь, он вам поможет.

Answer 2

Я обычно включаю свои шрифты следующим образом:

@font-face {    font-family: "Nunito Light"; font-display: swap;    src: url('../font/Nunito/Nunito-Light.ttf'); }

Вы должны просто включить .ttf файл своих шрифтов вместо включения .eot, .woff2

здесь: Everythings шрифты

Вы можете изменить шрифт .woff2 на шрифт .ttf