Make a custom Font Database

Fonts database is stored in the DBS.js file: https://www.photopea.com/code/DBS.js in a var FNTS variable. The "list" property contains the list of font files. For each font file, there is a string, consisting of six parts, separated by commas.

"FF,FSF,PSN,FLG,CAT,URL"
  • FF: Font Family
  • FSF: Font Subfamily
  • PSN: PostScript name (unique for each font)
  • FLG: Flags of supported Unicode subsets. E.g. in binary, 15 = 0001111, so the font supports Latin 1, Latin Ext. A, Greek, Cyrillic
  • CAT: Category : 0 to 17 - see "cats" in FNTS
  • URL: the URL of the font file, relative to "rsrc/fonts/"

A simple "compression" can be applied to these six values:

  • When FF, FSF, FLG or CAT is empty, it is the same as for the previous font (above).
  • When PSN is empty, it is equal to FF+"-"+FSF, with spaces removed
  • When PSN is a, it is equal to FF, with spaces removed
  • When URL is empty, it is equal to "fs/"+PSN+".otf"
  • When URL is a, it is equal to "gf/"+PSN+".otf"

The font thumbnails are located at https://www.photopea.com/rsrc/fonts/fonts.png. There is a 120x20 px area for each font, 16 columns.

Fonts in the fonts.png are listed in the same order, as in FNTS. First column is filled first, then it continues to another column, etc.

Example: There are 35 font files in FNTS. The number of thumbnails in each column is (3,3,3,3, 3,3,3,3, 3,3,3,2, 0,0,0,0).

Replacing FNTS and fonts.png is sufficient to change the font database in Photopea.

Generate a Font Database automatically

We provide two programs (HTML files with JS inside), that can load font files and generate a font database (FNTS and fonts.png). Run them at the local HTTP server, so they can access font files from your hard drive (e.g. this extension for Chrome is sufficient).

You can get these programs at https://www.photopea.com/_dist_/font_getter.zip.

Put "font_getter" directory into Photopea directory (PP). When your fonts are in PP/rsrc/fonts/XYZ , put the HTML programs into PP/font_getter/program.html . Programs load font files from "../rsrc/fonts/" + URL.

font_list_generator.html

Open the file and insert the relative URLs of font files into the "urls" variable. For each file, insert a pair [URL, caregory] like this: ["fs/FreeSans.ttf",10]. You can comment or uncomment any existing pairs.

Run the program (open font_list_generator.html in a browser). After the files are processed, you will see a new content of FNTS variable. Save it as a file (manually) to PP/code/FNTS.js and copy-paste it into PP/code/DBS.js.

font_pic_generator.html

This program loads FNTS.js. Then, it loads all font files (mentioned in FNTS.js) and generates a thumbnail image for each font file.

Run the program. After the files are processed, you will see font thumbnails in a canvas. Right-click the canvas and choose "Save Image As", and save it into PP/rsrc/fonts/fonts.png.

You can minify that PNG, e.g. in Photopea by exporting it with the PNG quality of 1%.