Hard-coded font size
@altano/satori-fit-text font size
If you’re rendering open graph cards in something like Next.js you may want the text of your cards to be dynamic text (e.g. the title of a blog post) but also fill up the entire card. Instead of hard-coding the font size, which isn’t feasible in this case, use @altano/satori-fit-text in opengraph-image.tsx:
You can find a more complicated example here that I use on this website where I have a title and a subtitle and I use multiple font weights.
Check out this codesandbox if you want to see a Node.js CLI app that computes the ideal font size for certain dimensions.
There are less roundabout solutions2 if you’re going to only fit text in a browser, but the library does technically work just fine there.
NOTE: The sandbox below does not work in Firefox. Satori can be made to work in Firefox but you’ll have to setup an
Intl.Segmenter polyfill first3, which I haven’t bothered to do.