# Font Loading API

The CSS Font Loading API provides events and interfaces for dynamically loading font resources. It gives you more control over the font loading process than standard CSS `@font-face` rules, allowing you to prevent Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT) and load fonts for use in Canvas.

## 1. The `FontFace` Object

The `FontFace` interface represents a single usable font face. You can create it programmatically.

```javascript
// new FontFace(family, source, descriptors)
const myFont = new FontFace('MyCustomFont', 'url(my-font.woff2)', {
  style: 'normal',
  weight: '700'
});
```

## 2. Loading the Font

Creating the object doesn't load it immediately. You must call `load()`, which returns a Promise.

```javascript
myFont.load().then((loadedFace) => {
  // Font loaded successfully
  document.fonts.add(loadedFace);
  document.body.style.fontFamily = 'MyCustomFont, sans-serif';
}).catch((error) => {
  console.error('Font loading failed:', error);
});
```

## 3. `document.fonts` (FontFaceSet)

The `document.fonts` property is a `FontFaceSet` interface that manages the fonts used by the document.

### Checking if a font is ready
You can check if a specific font string is ready to be rendered.

```javascript
if (document.fonts.check('12px MyCustomFont')) {
  console.log('Font is available');
}
```

### Waiting for all fonts
You can wait for all fonts in the document to finish loading.

```javascript
document.fonts.ready.then(() => {
  console.log('All fonts are loaded and ready');
});
```

## 4. Use Case: Canvas

When drawing text to a `<canvas>`, the font must be loaded *before* you draw, otherwise, the browser might draw with a fallback font.

```javascript
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const font = new FontFace('PixelFont', 'url(pixel.woff2)');

font.load().then((loadedFace) => {
  document.fonts.add(loadedFace);
  
  ctx.font = '30px PixelFont';
  ctx.fillText('Hello World', 10, 50);
});
```

## 5. Events

The `FontFaceSet` fires events during the loading lifecycle.

*   `loading`: Fired when the font loading process starts.
*   `loadingdone`: Fired when all fonts have finished loading.
*   `loadingerror`: Fired when an error occurs.

```javascript
document.fonts.addEventListener('loading', (event) => {
  console.log('Font loading started');
});
```

[[programming/javascript/vanilla/javascript]]
[[programming/javascript/vanilla/canvas-api]]
[[programming/javascript/vanilla/promises-async-await]]