A pipeline for generating SVG font previews for large amounts of font families.
This will generate optimized, gzipped SVG previews for all Google Web Fonts that have a regular
variant into ./demo/public/font-previews.html.gz
. At time of writing, the output comes in at under 8MB
when rendering 1500+ Google Web Fonts.
npm i
- Add a Google Web Fonts API key to
./index.js
node index.js
You can test performance of rendering 1500+ SVG font previews with virtual rendering after running through Quickstart.
cd ./demo
npm i
npm run start
![image](https://private-user-images.githubusercontent.com/4801431/250302011-cb205b04-3512-456b-a091-c900bfb168c7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxNjUxNTMsIm5iZiI6MTcyNjE2NDg1MywicGF0aCI6Ii80ODAxNDMxLzI1MDMwMjAxMS1jYjIwNWIwNC0zNTEyLTQ1NmItYTA5MS1jOTAwYmZiMTY4YzcucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkxMiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MTJUMTgxNDEzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NWI5YjljYWRmODMzNmZmMzdhNzcyNTU5ZDRjM2FhNjAwOTQ4NWIwZjllMzkxMDhlZGJhMTRjZWVkYzc0MjM4MCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.MxOXCPYijsWY_Syb5qAJ0t5qa09DzO1Ibvk1GD19lwY)
- I used danmarshall/google-font-to-svg-path to discover the rendering approach.