Fontaine

Use as Web Fonts

Add @font-face rules pointing at fonts.noisefactor.io. Works everywhere, nothing to install.

@font-face {
  font-family: 'Inter';
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.noisefactor.io/fonts/inter/Inter-Regular.woff2')
       format('woff2');
}

body { font-family: 'Inter'; }

Preload the blank variant for zero layout shift — it loads instantly (~5 KB) and holds the exact same metrics as the real font:

<!-- Preload blank variant for instant layout -->
<link rel="preload"
      href="https://fonts.noisefactor.io/fonts/inter/Inter-Blank.woff2"
      as="font" type="font/woff2" crossorigin>

<style>
  @font-face {
    font-family: 'Inter Blank';
    src: url('https://fonts.noisefactor.io/fonts/inter/Inter-Blank.woff2')
         format('woff2');
  }
  body {
    font-family: 'Inter', 'Inter Blank';
  }
</style>

Use as a Bundle

For webapps that need all 100 fonts offline, the JavaScript bundle downloads and caches everything in IndexedDB (~140 MB, one-time).

import { FontLoader } from './font-loader.js';

const loader = new FontLoader();
await loader.load('./bundle');

// Register any font for use in CSS
await loader.registerFont('01-inter', 'Inter');

// Filter by tag or category
const monos = loader.getFontsByTag('monospace');
const core = loader.getFontsByTag('core');

Try the bundle demo →