How to use local font family in Angular 8?

Question

I have some custom fonts in my /assets/font folder , let's say it is "ITC Charter Com Black" and I got four kind of files :.eot .svg .tff .woff.

and how can I use these font in my project? I tired:font-family: 'ITC Charter Com Black';

it is not work.

Answer 1

Setup before using the Custom Font

Step 1: In the folder src/assets create a new folder fonts so the new path looks like src/assets/fonts.

Step 2: Place your custom font .ttf file inside this src/assets/fonts so the new path looks like src/assets/fonts/custom_font.ttf.

Step 3: Now in the folder fonts create a new .css file such as font-file.css so now the path looks like src/assets/fonts/font-file.css. Inside this file write this,

@font-face {
  font-family: "my_custom_font";
  src: url("./custom_font.ttf") format("opentype");
}

After three steps this is how your directory structure should look like,

src -
     |
      - ...   //other folders
     | 
      - assets // assets folder
              |
               -fonts // fonts folder
                     |
                      -font-file.css //.css file
                     |
                      -custom_font.ttf //.ttf file

Step 4: Go to your angular.json file and under the very first options:{} attribute you will have styles:[]. In this paste the full path to your font-files.css such as

"options": {
            ...,
            "styles": [
              "src/styles.scss",
              "src/assets/fonts/font-file.css" //the path to your font-file.css which we defined earlier in step3
            ]

          }

Using Custom Font

Now you can easily use the newly added custom font such as,

body {
    ...
    font-family: 'my_custom_font', 'arial', sans-serif;
}

Answer 2

Add font-family in style.css like this -

@font-face {
  font-family: 'appfont';
  src: url('/fonts/TitilliumWeb-Regular.ttf');
}

body {
  font-family: 'appfont', sans-serif;
}