Better typography, built automatically
Eliminate font-induced layout shifts and manual preloading with a build tool that automatically detects, matches, and optimizes your typography.
Web performance is often a game of managing trade-offs, but typography should not be one of them. For years, developers have manually balanced the visual appeal of custom fonts against the technical debt of layout shifts. To solve this properly, you generally have to coordinate three distinct parts: early preloading, font-display strategies, and metric-matched fallback stacks. Getting these right is a repetitive and error-prone process that persists even in modern frameworks.
TypeSnap is a new command-line tool and build plugin designed to handle this entire workflow through static analysis. It scans your project to identify every font you use, whether they are hosted locally, pulled from Google Fonts, or declared in your Tailwind configuration. Once it understands your font landscape, it generates the necessary assets to ensure your site loads efficiently and remains visually stable while files are being fetched.
The tool focuses on three specific outputs. It creates preload tags so the browser knows to prioritize font files the moment a user lands on your site. It also ensures every font declaration includes the appropriate display rules to prevent invisible text. Finally, it generates a CSS fallback stack using a database of font metrics. This adjusts the size and spacing of system fonts so they occupy the same space as your custom brand fonts, effectively eliminating the jump in layout when the primary font finishes loading.
TypeSnap is not a runtime library or a font hosting service. It operates entirely during your build process, meaning it adds no weight to your production bundle. It is built to work seamlessly with Vite and Next.js, and it can even be integrated into your continuous integration pipeline to prevent new font issues from reaching your users. By automating the technical requirements of web typography, it lets you focus on design without worrying about the performance cost.
This project is entering its final stages of preparation and will be available for general use in three days. By shifting the burden of font optimization from the developer to the build tool, TypeSnap makes a stable and fast web the default state for your project.