How to automatically inline google fonts using base64

Question

I'm creating personal blog with next.js.

Currently i use google fonts to provide fonts for my blog. Everything works fine except initial content shift on load.

When I load my web it will shift when new font loads (not all fonts have same spacing, sizes, etc...). So my question is how to prevent this content shift?

I have seen many suggestions to add loading screen until everything loads, but I think that the best solution would be just to bundle everything to the html itself. NextJs automatically inlines styles for me with <style/> tags and next-images will inline small images with base64. So how do I automatically inline my fonts (I dont want to always change tons of @font-face declaration when I decide to change font)?

Currently i use:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

I would like NextJS to automatically convert it to something like this:

@font-face {
    font-family: 'myfont';
    src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
    font-weight: normal;
    font-style: normal;
}

Answer 1

You can use this amazing project to get any google font with base64 inlined src.

embedded-google-fonts

just put your google font link here: https://amio.github.io/embedded-google-fonts/

for example, for Barlow font: https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;800&display=swap

then you can copy the result and create a <your-font>.css file in the project.