How to load a font file from css file into Angular project

Question

I have this project with fonts, images and CSS files under the folder assets:

How I can import the fonts into this CSS file?

@font-face {
    font-family: lg;
    src: url(./assets/fonts/lgd641.eot?n1z373);
    src: url(./assets/fonts/lgd41d.eot?#iefixn1z373) format("embedded-opentype"), url(./assets/fonts/lgd641.woff?n1z373) format("woff"), url(./assets/fonts/lgd641.ttf?n1z373) format("truetype"), url(./assets/fonts/lgd641.svg?n1z373#lg) format("svg");
    font-weight: 400;
    font-style: normal;
}

Now I get not found.

Are you saying it's working with a path like 'assets/fonts/whatever`? Or was it a different change/pattern that allowed it to work? — Alexander Staroselsky
– Alexander Staroselsky, Commented Oct 22, 2019 at 20:40

Dharman · Accepted Answer · 2020-03-21 17:11:06Z

1

Try changing the paths to the following:

@font-face {
    font-family: lg;
    src: url(assets/fonts/lgd641.eot?n1z373);
    src: url(assets/fonts/lgd41d.eot?#iefixn1z373) format("embedded-opentype"), url(assets/fonts/lgd641.woff?n1z373) format("woff"), url(assets/fonts/lgd641.ttf?n1z373) format("truetype"), url(assets/fonts/lgd641.svg?n1z373#lg) format("svg");
    font-weight: 400;
    font-style: normal;
}

edited Mar 21, 2020 at 17:11

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Oct 22, 2019 at 20:56

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

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

1 Comment

Peter Penzov Over a year ago

Do you know the solution for this? stackoverflow.com/questions/58512137/…

Manish Sharma · Accepted Answer · 2019-10-22 15:49:25Z

0

you can use ../fonts/file-name path to the font directory in place of ./assets/fonts in css file.

answered Oct 22, 2019 at 15:49

Manish Sharma

2593 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to load a font file from css file into Angular project

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related