CODEWITHSUNDEEP
angularfont-facewebfont-loader
Waddas
Waddas

Reputation: 1392

Use Font Loader in Angular

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.

Upvotes: 5

Views: 3475

Answers (3)

Kamran Taghaddos
Kamran Taghaddos

Reputation: 594

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.

Upvotes: 0

Rich
Rich

Reputation: 932

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>

Upvotes: 1

Mohi
Mohi

Reputation: 1808

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...*/})
}

Upvotes: 10

Related Questions