CODEWITHSUNDEEP
cssangularsassfonts
felixo
felixo

Reputation: 1613

How to import and use fonts in Angular?

I am trying to make my fonts work in my angular project with local font files. So I have a font Univers LT, the files are placed in assets/fonts along with the fonts.scss file. This I have then declared in angular.json:

"styles":[
 //... other styles
 "src/assets/fonts/fonts.scss"
 ]

Below is my font.scss:

@font-face {
font-family: 'UniversBlack';
font-style: normal;
font-weight: normal;
src: local('Univers LT Std 75 Black'), url('UniversLTStd-Black.ttf') format('ttf');
}

When I for example what to used UniverseBlack, in the h1 tag. I go font-family: 'UniverseBlack', which under my understanding should do the job, but it doesn't! Any input is much appreciated!

Upvotes: 1

Views: 1441

Answers (1)

Md Rafee
Md Rafee

Reputation: 5550

N.B: Use css extension for font instead of scss, it might solve your problem. I have implemented your font and works just fine. Here is what I did so far.

In assets folder file structure should be:

> UniversLTStd-Black.woff
> font.css

In font.css:

@font-face {
font-family: 'Univers LT Std 75 Black';
font-style: normal;
font-weight: normal;
src: local('Univers LT Std 75 Black'), url('UniversLTStd-Black.woff') format('woff');
}

This font can be attached in two ways.

First way: you can add it angular.json. Then you have to restart by ng serve

Second way import it in styles.css. Then it will work fine.

In styles.css:

@import "../src/assets/fonts/font.css";

Then in any component style:

 h1 {
font-family: 'Univers LT Std 75 Black';
}

Upvotes: 1

Related Questions