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.
Add a comment
|
3 Answers
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...*/})
}
1 Comment
vanwinter
You can use this anywhere, not limited to component. Run WebFont.load(...) only once in your code, and fonts will be available in all components. I am successfully loading this from a service constructor.
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>
Comments
Use this approach:
Install fontfaceobserver package from npm
npm i fontfaceobserverSetup 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.
