Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including angular-ffobserver with all npm packages installed. Try it out:

var angularFfobserver = require("angular-ffobserver")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

angular-ffobserver v0.1.3

Fontfaceobserver Angular >= 1.4 wrapper directive

angular-ffobserver

Fontfaceobserver Angular >=1.4 wrapper directive

Overview

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.

Getting started

Installing

npm install angular-ffobserver

angular-ffobserver requires 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.

fontfaceobserver/fontfaceobserver.js

Please note you need to determine if you need want to include with or without Promise fallback.

Declare in your module

  angular.module('app', [
    'angular-ffobserver'
  ])

Declare in your markup

<body data-ffobserver=""
      data-ffobserver-fonts='[["roboto", {"weight": 200}],["roboto-light", {"weight": 200}]]'
      data-ffobserver-class="font-loaded--roboto"
      data-ffobserver-cookie-key="font-loaded"
      data-ffobserver-cookie-value="roboto"></body>

Recommend to use it on the body element

Declare in your CSS

First the fontfamily itself

@font-face{
  font-family:"roboto-light";
  src:url("../fonts/roboto-light.woff2") format("woff2"), url("../fonts/roboto-light.woff") format("woff"), url("../fonts/roboto-light.svg#roboto-light") format("svg");
  font-weight:200;
  font-style:normal;
  font-stretch:normal
}

Than the class modifier for the requested element

body {
  font-family: Arial, Helvetica, sans-serif;
  &.font-loaded--roboto {
      font-family: 'roboto-light', Arial, Helvetica, sans-serif;
      font-weight: 200;
  }
}

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free