My OG image generator script involves creating an SVG and then converting it to PNG.
-
My OG image generator script involves creating an SVG and then converting it to PNG. I'm having a problem with custom fonts - the CI runner obvs doesn't have the font installed that I want for the image. The images are generated as part of the build process, here's the template:
https://github.com/sophiekoonin/localghost/blob/main/src/og-images.njkIn my CI script I'm trying to move the font file into the /usr/share/fonts dir on the runner, but it doesn't seem to be working. Any tips for what I could try next?
https://github.com/sophiekoonin/localghost/blob/main/.github/workflows/deploy-neocities.yml#L21
-
@sophie data-uri-base64-ing fonts?
-
@pepelsbey I actually tried that first, and it didn't seem to work
-
@pepelsbey @sophie I am very interested in the topic, too! I tried the inline CSS with base64 fonts, and it works fine within SVG, but when being rendered to jpeg or png it gets lost. Neither Eleventy Image nor Sharp seems to be able to handle that (Puppeteer should do the trick, but I don't want to add that to my project)
-
Zach Leatherman :11ty:replied to Lene Saile last edited by
@lene @pepelsbey @sophie if you don’t want to add it to your project, you can use https://www.11ty.dev/docs/services/screenshots/
-
Lene Sailereplied to Zach Leatherman :11ty: last edited by
@pepelsbey You are right, Eleventy Image uses sharp, I completely forgot that!
@zachleat Ah! You are using that on zachleat.com right? I'll have a look into your repo!
-
Zach Leatherman :11ty:replied to Lene Saile last edited by
@lene @pepelsbey @sophie not much to it other than <img src="POINT TO SERVICE" alt="describe the image">
