If done concurrently, Node easily hits out-of-memory errors. Each TTF file is loaded as a Buffer into memory, and the resulting SVG path can be dozens of kilobytes. Each SVG’s path (that is, the vector path, not the file path) is saved as a string to render with React later. Each font’s TTF file is saved to /tmp and passed to opentype.js to be rendered as an SVG. It filters out poor candidates for fonts to include (like barcodes) and creates data structures to store metadata. This compiler downloads the full list of fonts from the Google Fonts API. I started the project by building a compiler. By doing this, an easily-renderable preview could be stored in my JavaScript and drawn to the screen immediately. Instead, I decided to pre-render each font. Triggering the download when the font is to actually be displayed would make scrolling laggy and cause flashes of unrendered fonts. Using these directly is a poor option for a dropdown because opening the dropdown would trigger thousands of downloads of hundreds of megabytes of font files from Google. This introduced a rather unique and complicated set of challenges.įonts on Google Fonts are served as WOFF2 (or WOFF, or another format if your browser is older). While apps like Google Docs and others only display a handful of fonts to choose from, the Site Builder required the display of over a thousand fonts. Most font pickers in other applications show each typeface off by rendering its own name. A long while ago when building the Pinecast site builder, I came had a need for a dropdown that allows the user to choose a font from Google Fonts.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |