capsize
Flipping how we define typography in CSS. (by seek-oss)
fontaine
Automatic font fallback based on font metrics [Moved to: https://github.com/unjs/fontaine] (by danielroe)
| capsize | fontaine | |
|---|---|---|
| 1 | 5 | |
| 1,470 | 1,344 | |
| 1.6% | - | |
| 8.0 | 10.0 | |
| 7 days ago | 7 months ago | |
| TypeScript | TypeScript | |
| MIT License | MIT License |
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
capsize
Posts with mentions or reviews of capsize.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2023-06-06.
fontaine
Posts with mentions or reviews of fontaine.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2023-06-06.
- Watch Out for Layout Shifts with ‘ch’ Units
-
Astro Font Fallbacks with Capsize: reduce CLS
An alternative to Capsize for reducing font swap layout shift is Fontaine. It has a Vite plugin, and is able automatically to update font face CSS (like we will do, using Capsize metrics). We do something a little more manual here with Capsize, just to help get a grounding in the issue and solution approach.
-
You don't need zero JS website for a perfect Lighthouse score
Fonts are one of the biggest pain points in the context of performance optimization. I have decided to not use any CDN like Google Fonts but instead, I'm serving them myself. Also, I have used a cool package called Fontaine which reduces CLS by using local font fallbacks with crafted font metrics.
-
How I ruined my SEO
I started using fontaine on my blog. If you haven't tried it out, you can find it here. It helps reduce Cumulative Layout Shift. The flash of unstyled content jank that you can see when you first land on a site, before fonts have loaded. I can't see why that would be an issue. It should improve my blogs Core Web Vitals and help stuff rank better, not worse. I think this is a red herring.
-
Docusaurus: Using fontaine to reduce custom font cumulative layout shift
Custom font usage can introduce cumulative layout shift (or "jank") to your website. This post shows how to use fontaine to reduce this with Docusaurus sites.
What are some alternatives?
When comparing capsize and fontaine you can also consider the following projects:
astro - The web framework for content-driven websites. ⭐️ Star to support our work!
dayjs - ⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API
moment - Parse, validate, manipulate, and display dates in javascript.
fontaine - Automatic font fallback based on font metrics [Moved to: https://github.com/danielroe/fontaine]
Docusaurus - Easy to maintain open source documentation websites.
blog.johnnyreilly.com - This is the source code for https://johnnyreilly.com
web-vitals - Essential metrics for a healthy site.