%% run start ```ts const {LinkPreview} = customJS return LinkPreview.getLinkPreviewFromUrl("https://docs.astro.build/en/guides/fonts/") ``` %% <div class="nifty-link-card-container"> <a class="nifty-link-card" href="https://docs.astro.build/en/guides/fonts/" target="_blank"> <div class="nifty-link-card-text"> <div class="nifty-link-card-title line-clamp-2">Using custom fonts</div> <div class="nifty-link-card-description">Looking to add some custom typefaces to an Astro website? Use Google Fonts with Fontsource or add a font of your choice.</div> <div class="nifty-link-href"> <img class="nifty-link-icon" src="https://docs.astro.build/favicon.svg"> https://docs.astro.build/en/guides/fonts/ </div> </div> <div class="nifty-link-image-container"> <div class="nifty-link-image" style="background-image: url('https://docs.astro.build/open-graph/en/guides/fonts.png')"> </div> </div> </a> </div> %% run end %% Basically you just need to follow this. 1. download font [[Geist]] from github. 2. put the `woff` font in your `public/fonts` 3.