awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
bramstein avatar

bramstein/fontfaceobserver

0
View on GitHub↗
4,338 stars·267 forks·JavaScript·BSD-2-Clause·7 viewsfontfaceobserver.com↗

Fontfaceobserver

Fontfaceobserver is a webfont availability detector and developer tool designed to synchronize typography loading with page rendering. It provides a promise-based API that detects when specific webfonts have been downloaded and applied to the document.

The tool manages the loading process for fonts hosted on external services or self-hosted servers, tracking availability to prevent layout shifts and the flash of unstyled text. This allows for dynamic typography control, enabling specific CSS changes or animations to trigger only after a typeface is ready for use.

The project monitors font states through a combination of canvas-based measurement and polling, utilizing CSS rule injection to trigger browser downloads and asynchronous notifications to signal completion.

Features

  • Webfont Availability Detectors - A lightweight tool for detecting if specific webfonts have been downloaded and applied to the document.
  • Custom Font Loading - Manages the loading and registration process for custom fonts from both external services and self-hosted servers.
  • Font Loading Libraries - Provides a comprehensive library for orchestrating and tracking webfont loading to prevent flash of unstyled text.
  • Promise APIs - Provides a promise-based API that resolves when specific webfonts have been downloaded and applied.
  • Webfont Load Monitors - A Webfont Loading Monitor for the project that tracks the availability of specific webfonts and resolves when the font is successfully loaded.
  • Webfont Availability Monitoring - Checking if a specific webfont is successfully downloaded and available for use before rendering text.
  • Resource Availability Polling - Uses a polling mechanism to repeatedly check for font availability until the typeface loads or timeouts occur.
  • Async-to-Promise Event Wrappers - Wraps asynchronous font loading events in promises to allow the application to synchronize rendering.
  • Typography Synchronization - Enables triggering CSS changes or animations only after a font has been fully loaded to prevent layout shifts.
  • Dynamic CSS Injection - Programmatically injects CSS @font-face declarations into the document to trigger browser font downloads.
  • Canvas-Based Detection - Implements font detection by measuring text width on a canvas element to determine if a typeface is loaded.
  • Typography Libraries - Event listener for web font loading.
  • Web Typography Utilities - Efficient font loading event management.

Star history

Star history chart for bramstein/fontfaceobserverStar history chart for bramstein/fontfaceobserver

How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI

Frequently asked questions

What does bramstein/fontfaceobserver do?

Fontfaceobserver is a webfont availability detector and developer tool designed to synchronize typography loading with page rendering. It provides a promise-based API that detects when specific webfonts have been downloaded and applied to the document.

What are the main features of bramstein/fontfaceobserver?

The main features of bramstein/fontfaceobserver are: Webfont Availability Detectors, Custom Font Loading, Font Loading Libraries, Promise APIs, Webfont Load Monitors, Webfont Availability Monitoring, Resource Availability Polling, Async-to-Promise Event Wrappers.

Which projects share features with bramstein/fontfaceobserver?

Projects with overlapping indexed features include: typekit/webfontloader — Webfontloader is a JavaScript library and standardized API for fetching and managing web fonts from multiple external… photopea/typr.js — LIVE DEMO Typr.js is a Javascript parser and utility for working with fonts (TTF, OTF, TTC, WOFF). It is an… ecomfe/fontmin — Fontmin is a web font asset pipeline and minification tool designed to reduce font file sizes by removing unused… davidmerfield/typeset — Typeset is an HTML pre-processor for web typography which provides typographic features used traditionally in fine… ladjs/custom-fonts-in-emails — An extremely easy way to use custom fonts in emails without having to use art software. jaicab/localfont — Implement localStorage web font caching in seconds.

Projects sharing features with Fontfaceobserver

These projects share indexed features with Fontfaceobserver. Shared tags can include platform or build tooling; verify the primary use case before treating a result as a replacement.
  • typekit/webfontloadertypekit avatar

    typekit/webfontloader

    9,255View on GitHub↗

    Webfontloader is a JavaScript library and standardized API for fetching and managing web fonts from multiple external providers and custom stylesheets. It functions as a font loading state manager that coordinates the retrieval of typography assets through a unified interface. The project specifically focuses on preventing the flash of invisible text by managing loading states and timeouts. It distinguishes itself by providing a mechanism to synchronize typography across different browsing contexts, including the ability to inject font loading logic into child window frames and iframes. The

    JavaScript
    View on GitHub↗9,255
  • ecomfe/fontminecomfe avatar

    ecomfe/fontmin

    6,195View on GitHub↗

    Fontmin is a web font asset pipeline and minification tool designed to reduce font file sizes by removing unused glyphs. It functions as a font format converter and an SVG icon font generator, allowing for the creation of optimized font assets for web deployment. The project is distinguished by its ability to synthesize custom icon fonts by converting multiple SVG files into a single font asset. It further differentiates itself through a plugin-based processing pipeline, which enables the integration of custom transformation functions into the font handling stack. The tool covers a broad ran

    JavaScript
    View on GitHub↗6,195
  • davidmerfield/typesetdavidmerfield avatar

    davidmerfield/typeset

    2,682View on GitHub↗

    Typeset is an HTML pre-processor for web typography which provides typographic features used traditionally in fine printing which remain unavailable to browser layout engines. Typeset's processing brings the following to your webpages:

    JavaScript
    View on GitHub↗2,682
  • jaicab/localfontJ

    jaicab/localFont

    0View on GitHub↗

    Implement localStorage web font caching in seconds.

    View on GitHub↗0
  • Compare all 30 related projects→