# \[Phaser3\] BMFFactory, create bitmapfonts at runtime

**URL:** <https://phaser.discourse.group/t/phaser3-bmffactory-create-bitmapfonts-at-runtime/11518>\
**Category:** Showcase\
**Created:** [April 11, 2022, 10:06am UTC](https://phaser.discourse.group/t/phaser3-bmffactory-create-bitmapfonts-at-runtime/11518 "2022-04-11T10:06:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jjcapellan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jjcapellan/32/542_2.png) [@jjcapellan](https://phaser.discourse.group/u/jjcapellan)\
**Post date:** [April 11, 2022, 10:06am UTC](https://phaser.discourse.group/t/phaser3-bmffactory-create-bitmapfonts-at-runtime/11518/1 "2022-04-11T10:06:17Z")

</div>

Hi all,  
This class creates bitmapfonts at **runtime** and adds them to the bitmapfonts cache, using default or already loaded browser fonts (included webfonts).

## Features

- Converts any loaded font\[1\] in the browser to a bitmapfont, ready to use in Phaser3 at runtime.
- Shares same texture for multiple bitmapfonts.
- Ensures power of two texture size (optional).
- Calcs kernings for 97 commonly used pairs. (optional).\[2\]
- Supports list of fallback fonts.
- Predefined fallback font lists for sans-serif, sans, and monospace types.

Repository and more info: [https://github.com/jjcapellan/phaser3-bitmapfont-factory](https://github.com/jjcapellan/phaser3-bitmapfont-factory)  
Demo: [https://jjcapellan.github.io/phaser3-bitmapfont-factory/](https://jjcapellan.github.io/phaser3-bitmapfont-factory/)  
I hope you find it useful !!

* * *

1. Fonts with ligatures are not supported. 

2. In Phaser 3.55.2/WebGL kernings are not used by bitmapText objects. This was fixed in new Phaser v3.60.

---

<div class="post-metadata">

**Author:** ![jjcapellan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jjcapellan/32/542_2.png) [@jjcapellan](https://phaser.discourse.group/u/jjcapellan)\
**Post date:** [January 21, 2023, 5:53pm UTC](https://phaser.discourse.group/t/phaser3-bmffactory-create-bitmapfonts-at-runtime/11518/2 "2023-01-21T17:53:13Z")

</div>

Update:  
New version v1.1.1 adds support for the latest versions of Phaser(\>3.55.2).  
The latest changes made to Phaser have allowed font generation to be more than 4 times faster (Thanks Phaser contributors 😀).

---

<div class="post-metadata">

**Author:** ![jjcapellan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jjcapellan/32/542_2.png) [@jjcapellan](https://phaser.discourse.group/u/jjcapellan)\
**Post date:** [November 19, 2024, 5:32pm UTC](https://phaser.discourse.group/t/phaser3-bmffactory-create-bitmapfonts-at-runtime/11518/3 "2024-11-19T17:32:02Z")

</div>

Update:

# v2.0.0

This version makes the bitmapFont texture without using Phaser.  
This change has caused the position and size of _BitmapText_ to differ slightly from previous versions. So, while no breaking changes have occurred, I have decided to increment the major version.

## New improvements:

- **Reduced size of the generated texture** : Previously, the offsets for each glyph were not calculated, which caused whitespace to be included within the glyph’s frame. Now, offsets are calculated based on the metrics, ensuring frames are the same size as the glyphs.
- **New texture rendering** : A dedicated graphic context is now used to generate the texture on a canvas element. Previously, a _Phaser.GameObjects.RenderTexture_ object was used, drawing multiple _Phaser.GameObjects.Text_ objects on it.
- **Performance improvement**
- Support for new Phaser v4.0.0 .

## Fixes:

- **Incorrect font verification** : Due to changes in the _FontFaceSet_ API across various browsers for privacy reasons, it is no longer possible to use the _check()_ method of this API to verify font availability. The verification now uses a method based on comparing metrics between the browser’s default font and the desired font.
- **Rendering artifacts** : This issue arose in Phaser v3.85.2+. The solution was change the way bitmapfont texture is created. Previously, adding a 1px padding was attempted without success.