How to import a new font into a project - Angular 5

Question

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?

Nervy

Have a look here #3245641. Create the css fle and put it in your .angular-cli.json file – Arsis

Got the answer here, maven was corrupting the fonts #31002342 – Regulation

Answer 1

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"
],

Hydraulic

Do you mean to update my .angular-cli-json's styles to "styles": [ @font-face { font-family: lato; src: url(assets/font/Lato.ttf); } ] ? – Nervy

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 – Hydraulic

Is it necessary to add format("truetype"); ? I am using fonts.googleapis.com/css?family=Source+Sans+Pro and it is working directly – Longcloth

Good stuff! Works like a charm! – Reversible

@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. – Frigging

Answer 2

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; }

Arsis

Is it necessary to add format("truetype"); ? I am using fonts.googleapis.com/css?family=Source+Sans+Pro and it is working directly – Longcloth

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. – Schonfeld

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 – Septennial

I found that my paths had to be in the format "src/assets/fonts/file.ext" rather than "/assets/..." or "assets/..." or "./assets/..." – Swagger

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. :) – Snowfield

Answer 3

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

Abana

What is local() doing? – Dionedionis

Answer 4

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.

Landgrave

Answer 5

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);

Street

Answer 6

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.

Snowfield