104

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,349
  • 8
  • 29
  • 60
  • 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

6 Answers6

181

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
  • 8,640
  • 4
  • 39
  • 58
  • 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
47

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
  • 33,444
  • 11
  • 80
  • 118
  • 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
  • 10/10 emphasis on the "Do not forget to restart ng serve after doing this". Don't waste 20 minutes thinking you're dumb, by (being dumb and) not reading the entire answer. On this one, let me walk so you can run. :) – Alan D. Powell Jun 02 '23 at 23:49
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
  • 2,540
  • 1
  • 28
  • 40
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
  • 3,665
  • 34
  • 52
0

If you using material design, in style.scss file you need to add the following line of code

@import url("https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@import '~@angular/material/theming';
$typography: mat-typography-config(
  $font-family: 'Saira'
);

@include angular-material-typography($typography);
Botond
  • 630
  • 6
  • 9
0

Note: I recommend the above answers over this one because I believe I'm the only person on the planet who actually likes Apple's SF Pro Font, but just in case you're like me (and you're on a Mac searching for the .otf/.ttf files):

@Saptarshi Basu's answer worked perfectly for me. If you're in search of the SF Pro Font .otf (or .ttf) files:

  • Open the Font Book Application
  • Find the font in the scrollable list you'd like to include in your project
  • Right Click > Show in Finder
  • Copy (all or just the one) .otf (or .ttf) file into a fonts folder inside of assets (or wherever you want it in your project, but 10/10 would recommend creating a fonts folder)

My styles.scss file looks as such:

// Fonts
@font-face {
    font-family: SFPRO;
    src: url("assets/fonts/SF-Pro/SF-Pro-Text-Regular.otf"); 
    format: "opentype";
}

// CSS Reset
* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: SFPRO
}

And obviously, each my child .scss files "include" (hehe):

@import '../../../../../styles.scss';

I cannot stress this last part enough: LISTEN TO @DAVID'S ANSWER AND MAKE SURE YOU RESTART ng serve - TRUST HE (and I) ON THIS ONE.

Alan D. Powell
  • 61
  • 1
  • 4