Use Font Loader in Angular

Question

How do I use a font loader, such as WebFontLoader or FontFaceObserver, in Angular?

I'm not sure on what/where I need to import and how to use it in a component.

Answer 1

Do:
npm install webfontloader

Then in your component you can write like this:

app.component.ts:

import * as WebFont from 'webfontloader';
// ...
ngOnInit(){
  WebFont.load({/* your config...*/})
}

Answer 2

I've been configuring it in the index.html file itself (per the README on github)

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js">    
</script>
<script>
  WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif']
    }
  });
</script>

Answer 3

Use this approach:

1. Install fontfaceobserver package from npm

   npm i fontfaceobserver
   

2. Setup font observer (Note: you need to use this setup once in your app)

   import FontFaceObserver from 'fontfaceobserver';
   
   ngOnInit(): void {
       const font = new FontFaceObserver('My Family', {
         weight: 400
       });
   
       font.load().then(function () {
         console.log('Font is available');
       }, function () {
         console.log('Font is not available');
       });
   }
   

For implementing multiple fonts observer and also more optional configurations you can take a look at this official page: https://www.npmjs.com/package/fontfaceobserver

Hope this will help you.