Fontfaceobserver Angular >=1.4 wrapper directive
angular-ffobserver is an angular implementation of the fontfaceobserver.
From the original Fontfaceobserver description:
Font Face Observer is a small
@font-face loader and monitor (3.5KB minified and 1.3KB gzipped) compatible with any web font service. It will monitor when a web font is applied to the page and notify you. It does not limit you in any way in where, when, or how you load your web fonts. Unlike the Web Font Loader Font Face Observer uses scroll events to detect font loads efficiently and with minimum overhead.
npm install angular-ffobserver
ngCookies >=1.4. The $cookies method changed with 1.4 if you need earlier support please let me know.
You need to include Fontfaceobserver plugin also
$ npm install fontfaceobserver
And include it into your vendor scripts.
Please note you need to determine if you need want to include with or without Promise fallback.
Declare in your module
Declare in your markup
Recommend to use it on the body element
Declare in your CSS
First the fontfamily itself
Than the class modifier for the requested element
As you can see this example shows that the Body font style will be rendered with Arial until the
Fontfaceobserver not resolved and apply a class
font-loaded--roboto on the body