This repository downloads Google Fonts data, generates preview images for each font, and combines all the font previews into small chunk images.
Make sure to add a Google Fonts API key in a .env file as GOOGLE_FONTS_API_KEY
. You can get one for free here: https://developers.google.com/fonts/docs/developer_api
We commit the output directory because we only generate new PNGs if they're not yet generated. metadata.json
will be regenerated each time.
# install deps
bun install
# run all scripts
bun all
# check output folder
bun all
will run bun metadata
, bun png
, and bun packing
.
bun metadata
generates output/metadata.json
:
{
'ABeeZee': ['400', '400i'],
'Abhaya Libre': ['400', '500', '600', '700', '800'],
// etc
};
bun png
generates PNG files:
/output/png/abeezee.png
/output/png/abhaya-libre.png
...etc
bun svg
generates SVG files:
/output/svg/abeezee.svg
/output/svg/abhaya-libre.svg
... etc
Note
SVG previews are currently unused.
If any font family is problematic or doesn't generate an English preview, add it to src/families-to-skip.ts
.
For performance reasons, instead of loading individual font previews or one huge font preview bundle image at runtime, we combine font previews and split them into chunks.
Once you have individual /output/png/
files and /output/metadata.json
, you can run bun packing
to generate in /output/font-chunks/
:
- 35+ chunks containing 50 font previews each
fonts.json
which contains metadata about fonts and the chunks
These are the only files you need to create the font picker.
To see a font picker demo with the fonts you just packed:
- Copy the content of
/output/font-chunks/
into/example/public/v1/
- In
/example
, run:bun i
andbun dev
To avoid browser caching issues when generating new chunks for production, put the new chunks in a new public
folder, such as /public/font-chunks/v2/*
and update the path in the code.
- google-font-to-svg-path inspired the makerjs usage
- Figma inspired storing previews as SVGs