How to include font into css file

Question

I have a css file which I included into Angular project this way:

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

Into angular.json I added:

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

But into the css file font files are loaded like:

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"),

I get error:

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

And many more other like this. What is the proper way to solve this problem?

you have this file in your assets folder?

Gourav Garg
– Gourav Garg

2020-04-08 05:23:00 +00:00
Commented Apr 8, 2020 at 5:23 — Gourav Garg
– Gourav Garg, Commented Apr 8, 2020 at 5:23
Yes, I do but it's not found

Peter Penzov
– Peter Penzov

2020-04-08 06:17:21 +00:00
Commented Apr 8, 2020 at 6:17 — Peter Penzov
– Peter Penzov, Commented Apr 8, 2020 at 6:17
have you checked in dist/assets/fonts ?

Gourav Garg
– Gourav Garg

2020-04-08 06:18:52 +00:00
Commented Apr 8, 2020 at 6:18 — Gourav Garg
– Gourav Garg, Commented Apr 8, 2020 at 6:18

beanic · Accepted Answer · 2020-04-08 12:20:48Z

1

+50

You can add your font as follows:

@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");
}

Hope it help you.

answered Apr 8, 2020 at 12:20

beanic

5691 gold badge7 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nept0 · Accepted Answer · 2020-03-22 00:36:16Z

0

I usually include my fonts like this :

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

You should just include .ttf file of your fonts instead of including .eot, .woff2

here : Everythings fonts

you can change .woff2 font to .ttf font

edited Mar 22, 2020 at 0:36

answered Mar 22, 2020 at 0:32

Nept0

11 bronze badge

3 Comments

Peter Penzov Over a year ago

But what if I have also src: url(assets/fonts/materialdesignicons-webfont.eot?v=1.4.57); ? with some data?

Nept0 Over a year ago

for me just the .ttf file should be enougth and I do not understand why at the end, you've wrote ?v=1.4.57

Peter Penzov Over a year ago

This is from the original template.

Collectives™ on Stack Overflow

How to include font into css file

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related