search

madrilene / eleventy-excellent

Eleventy starter based on the workflow suggested by Andy Bell's buildexcellentwebsit.es.
https://eleventy-excellent.netlify.app/
Other
396 stars 70 forks source link

OG images don't work with webfonts #32

Closed httpsterio closed 9 months ago

httpsterio commented 9 months ago

when creating the OG images, webfonts don't work for the final jpg images.

This is mentioned here. https://bnijenhuis.nl/notes/automatically-generate-open-graph-images-in-eleventy/

The recommended solution is to locally install the fonts used, but I'm not entirely sure how to solve this when running the site on Netlify or any other non-local environment.

madrilene commented 9 months ago

Ah yeah, I have been fighting with that one. As you say, the problem is, that the font has to be installed on the system that is builiding your site, it can't just be referenced as an asset.

I have seen solutions where a specific system is set with GitHub CI, and then you can select a system font from that OS. This is nicer than what we have now, but still not the font we actually want.

My idea is now to convert og images into static assets that you create on the side when you are in development, add them to the assets folder and commit them - the build step only hast to pass them through. I will let you know if that works and is available.

madrilene commented 9 months ago

Done - og images are now build while you develop, and should be pushed as assets to the repo. The Font you set must be installed on your own system, then it should work fine. --> https://eleventy-excellent.netlify.app/assets/og-images/eleventy-excellent-20-preview.jpeg