7

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.

Shinji035
  • 331
  • 2
  • 6
  • 17
  • @David more like `assets` –  Jun 19 '19 at 08:37
  • David or edit it, I'll remove mine :) –  Jun 19 '19 at 08:43
  • You need to make sure that you add these files in the `assets` section of the `angular.json` file, then you can just reference them in css with `@font-face`, as suggested in the answer below and here: https://stackoverflow.com/questions/49878988/how-to-import-a-new-font-into-a-project-angular-5 – David Jun 19 '19 at 08:46

2 Answers2

13

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;
}
iCantC
  • 2,852
  • 1
  • 19
  • 34
3

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;
}
piedpiper
  • 520
  • 5
  • 18