Tiny Wins Home

Gatsby Social Cards

May 05, 2020

Spent the all of today creating social cards that are generated at build time for my Gatsby blog. Most of my frustration came with trying to load a custom font into my template loaded by puppeteer. Finally figured out that .otf fonts don’t like being base64 encoded as much as .woff fonts do. I should have turned off my local font file sooner to debug this 🤦‍♂. The other frustration was with the facebook debugger which was returning a 404 for the pages I was testing. Turns out you don’t get the path variable in gatsby template files at the server rendered phase. Had to switch to using the useLocation() hook to concat with siteUrl for my og:url tag.

Will write a full blog post tutorial at some point.