font_face_observer 2.0.8

  • Installing
  • Versions
  • 79


Font load events, simple, small and efficient. It wil use the FontFace api if available, otherwise it falls back to a Dart port of

Usage Example

import 'package:font_face_observer/font_face_observer.dart';
import 'package:font_face_observer/data_uri.dart';

FontFaceObserver ffo = new FontFaceObserver('Arial', weight: 'bold');
FontLoadResult result = await ffo.load('/url/to/arial.ttf');
if (result.isLoaded) {
    // at this point we're absolutely sure that the font has loaded
if (result.didTimeout) {
    // We've timed out and are not sure if the font has loaded.
    // You can reissue a ffo.check() call to check again if you want

// Build a base64 encoded data URI
DataUri di = new DataUri(); = DataUri.base64EncodeString('test');
  ..mimeType = 'text/plain';
  ..encoding = 'utf-8';
di.toString(); # data:text/plain;charset=utf-8;base64,dGVzdA==

Run the demo

To run the demo, just install dependencies and run pub serve test. Then open http://localhost:8080

pub get
pub serve test

Public API

// Constructing a new FontFaceObserver (with default values)
    String family,
        String style: 'normal',
        String weight: 'normal',
        String stretch: 'normal',
        String testString: 'BESbswy',
        int timeout: 3000,
        bool useSimulatedLoadEvents: false

// Check if the font face is loaded successfully
Future<FontLoadResult> check() async

// Load a font from the given URL by adding a font-face rule
// returns the same Future<FontLoadResult> from check()
Future<FontLoadResult> load(String url) async

// Unload a group of fonts (static call)
Future<int> FontFaceObserver.unloadGroup(String group);

// Unload a specific font by key and group
Future<bool> FontFaceObserver.unload(String key, String group);


Font Face Observer will use the FontFace API if available to detect when a font has loaded. If the browser does not support that API it will fallback to the method used in which relies on scroll events when the font loads and is quite efficient. If you want to force the use of the fallback mode, you can set useSimulatedLoadEvents: true when constructing your FontFaceObserver.


  • [x] Added more analysis option lint rules
  • [x] default to DDC for running tests


  • [x] #29 Add


This patch release includes the following changes:


  • [x] #27 Remove semver audit dependency, publish publicly


This patch release includes the following changes:


  • [x] #23 HY-5546 Add license to more files
    • HY-5546 Add license to more files
  • [x] #25 Adds license info from the original JS font face observer & W3C

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  font_face_observer: "^2.0.8"

2. Install it

You can install packages from the command line:

with pub:

$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

      import 'package:font_face_observer/font_face_observer.dart';
Version Uploaded Documentation Archive
2.0.8 Feb 28, 2018 Go to the documentation of font_face_observer 2.0.8 Download font_face_observer 2.0.8 archive
2.0.7 Feb 19, 2018 Go to the documentation of font_face_observer 2.0.7 Download font_face_observer 2.0.7 archive
2.0.6 Dec 6, 2017 Go to the documentation of font_face_observer 2.0.6 Download font_face_observer 2.0.6 archive
2.0.5 Dec 6, 2017 Go to the documentation of font_face_observer 2.0.5 Download font_face_observer 2.0.5 archive
2.0.4 Dec 6, 2017 Go to the documentation of font_face_observer 2.0.4 Download font_face_observer 2.0.4 archive


We analyzed this package on Jun 19, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.63.0
  • pana: 0.11.3


Describes how popular the package is relative to other packages. [more]
57 / 100
Code health derived from static analysis. [more]
100 / 100
Reflects how tidy and up-to-date the package is. [more]
100 / 100
Overall score:
Weighted score of the above. [more]
Learn more about scoring.


Detected platforms: web

Primary library: package:font_face_observer/font_face_observer.dart with components: html.


  • Maintain an example.

    Create a short demo in the example/ directory to show how to use this package. Common file name patterns include: main.dart, example.dart or you could also use font_face_observer.dart.

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 1 hint.

    Strong-mode analysis of lib/data_uri.dart gave the following hint:

    line: 118 col: 7
    'BASE64' is deprecated and shouldn't be used.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.22.1 < 2.0.0
Dev dependencies
analyzer >=0.29.0 <=0.30.0+4
browser ^0.10.0
coverage >=0.7.0 <2.0.0
dart_dev ^1.7.8
dart_style >=1.0.0 <2.0.0
dartdoc >=0.12.0 <=0.15.1
test >=0.12.0 <2.0.0