96

I want to import a new font to my Angular 5 project.

I have tried:

1) Copying the file to assets/fonts/

2) adding it to .angular-cli.json styles

but I have checked that the file is not a .css, it is an .otf that works like an .exe (it is an installer) so I do not really know how to import it. Any idea?

bellotas
  • 2,073
  • 5
  • 24
  • 55
  • 3
    Have a look here https://stackoverflow.com/questions/3245141/using-otf-fonts-on-web-browsers. Create the css fle and put it in your `.angular-cli.json` file – David Apr 17 '18 at 13:14
  • Got the answer here, maven was corrupting the fonts https://stackoverflow.com/questions/31001842/fontawesome-failed-to-decode-downloaded-font – Rajkiran Sep 03 '21 at 18:38

5 Answers5

166

You need to put the font files in assets folder (may be a fonts sub-folder within assets) and refer to it in the styles:

@font-face {
  font-family: lato;
  src: url(assets/font/Lato.otf) format("opentype");
}

Once done, you can apply this font any where like:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'lato', 'arial', sans-serif;
}

You can put the @font-face definition in your global styles.css or styles.scss and you would be able to refer to the font anywhere - even in your component specific CSS/SCSS. styles.css or styles.scss is already defined in angular-cli.json. Or, if you want you can create a separate CSS/SCSS file and declare it in angular-cli.json along with the styles.css or styles.scss like:

"styles": [
  "styles.css",
  "fonts.css"
],
Saptarshi Basu
  • 7,654
  • 3
  • 38
  • 53
  • Do you mean to update my .angular-cli-json's styles to "styles": [ @font-face { font-family: lato; src: url(assets/font/Lato.ttf); } ] ? – bellotas Apr 17 '18 at 13:21
  • 2
    You can put the `@font-face` definition in your global styles.css or stles.scss and you would be able to refer to the font anywhere - even in your component specific CSS/SCSS. `styles.css` is already defined in angular-cli.jso. Or, if yu want you can create a separate CSS file and mention it in angular-cli.json – Saptarshi Basu Apr 17 '18 at 13:23
  • Is it necessary to add format("truetype"); ? I am using fonts.googleapis.com/css?family=Source+Sans+Pro and it is working directly – Satish Patro Apr 08 '19 at 05:59
  • Good stuff! Works like a charm! – Ali Celebi Sep 17 '21 at 13:50
  • 1
    @SatishPatro You are only required to specify its format when your font file has uncommon file extension name or when you want to explicitly specify its format to your user agent to skip other format for enhancing load speed or bandwidth usage. In other circumstances, your browser can recognize your font file's format automatically. – rosshjb Sep 26 '21 at 23:04
38

You can try creating a css for your font with font-face (like explained here)

Step #1

Create a css file with font face and place it somewhere, like in assets/fonts

customFont.css

@font-face {
    font-family: YourFontFamily;
    src: url("/assets/font/yourFont.otf") format("truetype");
}

Step #2

Add the css to your .angular-cli.json (or .angular.json for angular 6+) in the styles config

"styles":[
 //...your other styles
 "assets/fonts/customFont.css"
 ]

Do not forget to restart ng serve after doing this

Step #3

Use the font in your code

component.css

span {font-family: YourFontFamily; }
David
  • 31,489
  • 10
  • 78
  • 113
  • 1
    Is it necessary to add format("truetype"); ? I am using https://fonts.googleapis.com/css?family=Source+Sans+Pro and it is working directly – Satish Patro Apr 08 '19 at 05:59
  • Please make sure that you put the forward slash before assets like "/assets/font/". If you miss the forward slash, it will lead to to invalid URL error. – Prateek Kumar Dalbehera Apr 28 '20 at 15:57
  • Make sure that the css file name is the same, in step 1 its customfont.css but in step 2 its customFonts.css so be careful – Omar Salem Jun 12 '21 at 05:40
  • I found that my paths had to be in the format "src/assets/fonts/file.ext" rather than "/assets/..." or "assets/..." or "./assets/..." – Jack J Jul 14 '21 at 18:50
6

the answer already exists above, but I would like to add some thing.. you can specify the following in your @font-face

@font-face {
  font-family: 'Name You Font';
  src: url('assets/font/xxyourfontxxx.eot');
  src: local('Cera Pro Medium'), local('CeraPro-Medium'),
  url('assets/font/xxyourfontxxx.eot?#iefix') format('embedded-opentype'),
  url('assets/font/xxyourfontxxx.woff') format('woff'),
  url('assets/font/xxyourfontxxx.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

So you can just indicate your fontfamily name that you already choosed

NOTE: the font-weight and font-style depend on your .woff .ttf ... files

Smaillns
  • 1,868
  • 1
  • 18
  • 27
1

If you're using Angular,

Make sure to put the fonts in your assets folder somewhere.

A lot of people new to angular figure they should put them elsewhere, but Angular does a lot of optimization for its prod build around files in the assets folder.

TheJeff
  • 2,862
  • 28
  • 44
-1

You'll also need to update your web.config file like this: (choose your font type)

<system.webServer>
  <staticContent>
    <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
    <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    <mimeMap fileExtension=".ttf" mimeType="application/x-font-truetype" />
    <mimeMap fileExtension=".otf" mimeType="application/x-font-opentype" />
  </staticContent>
eliod
  • 17
  • 4