Google Fonts VS og-image

I will use the Google Fonts service, we can use CDN links but I like to have those fonts directly in a project that is why I will download a list of fonts. I want to use the neutral font "Roboto", I think this type of font will fantastically represent our app with its functionality. I will download them and take only a few of them: regular, bold, light, and medium types.

13. Google Fonts

Google Fonts fonts.google.com Open-source fonts optimized for the web.

link do Google Fonts: https://fonts.google.com

Website: fonts.google.com

That's definitely pretty easy to achieve, just change the font settings to use a particular handwritten style font [0].

[0] https://fonts.google.com/?categoryFilters=Calligraphy:%2FScr...

The game map uses several different typefaces to label places of interest from massive slab serifs to handwritten cursive. Rather than spending a single dime on paid fonts, I headed over to Google Fonts and quickly found decent alternatives to each type. Here’s the breakdown:

You can also download fonts from the internet using tools such as Google Fonts and then embed them into your webpage. For example:

We are using google_fonts to make the font more human-like 🤓, with google fonts, you are free to choose from a wide range of great fonts, but feel free to ignore it since it doesn't have to do with the animation itself 😅

Google fonts

Now here's the thing since these are part of the meta tags, and The image shown in the tags are ... well! images, making them dynamic is a bit tricky. generating images isn't a menial task that just every web server can do ... it's resource intensive, time-consuming and all the other nightmares. and making it part of your dynamic web app is another ball game altogether. So what's new? well, @vercel/og is, this library lets you build image content from HTML/React that too insanely fast, like really fast . and you can pair this with any edge network like AWS Lambda on the edge, Cloudflare workers, etc to make it even faster.

It’s not embedding. When you paste that image url a serverless function running a headless browser requests say a next app which loads up a page based on the params in the url. Then we take a snapshot and image data is sent back as response to you hence the image appears. You can check out this: with NextJS and puppeteer

The other day I was looking through a repo and stumbled across someone using Vercel’s open graph image generator (https://og-image.vercel.app/), something I had no idea existed. I was able to set it up and replace my own implementation of something similar on my blog in an evening. My implementation involved generating images at build time with Gatsby, why I ever thought that was a good idea is beyond me.

But what if the content of the page is not visual at all, and no photo really suits the contents of the page? And what if we have a lot of these pages, with dynamically generated content? Luckily we are not limited to photography, we can use text! The prime example of this is how GitHub generates previews for issue URLs: they generate an image containing enough info such that users know what they will click on. These images are generated on-demand, as storing an image for every GitHub pull request or issue would be unfeasable. Another example is Vercel, which even open sourced their Open Graph Image as a Service that they occasionally use on blog posts or announcements.

Hi, it is basically a embedded, better and easier (API-wise) version of https://github.com/vercel/og-image

Vercel has a really good simple generator if you don’t want to spend time on graphic design: https://og-image.vercel.app

After some research, I found out that Vercel made an app (https://og-image.vercel.app/) that was really good, but did not quite fit what I was looking for, so I largely cloned the idea (but with my own code).

Nice work. But I am using my custom fork of https://github.com/vercel/og-image.