[WordPress] Adding Google Fonts to block editor/full site editor

When I moved my blog from free WordPress.com to self-hosted WordPress and reinstalled the same theme, I noticed that the font selection was different when I tried to edit my site via the Full Site Editor.

WordPress free had a lot of fonts whereas my own site only had one or two even though I installed the same theme.

I looked around for solutions but most of the plugins use the Customizer instead of the Block Editor and I didn’t want to use that. I simply want Google Fonts to appear in the Font dropdown of the Full Site Editor whenever I want to edit my theme.

After much Googling I finally found the solution that works for me…

Jetpack Google Fonts

Everything you need to know about it is here. But basically, to make it work…

1. Install Jetpack plugin
2. Install Gutenberg plugin
3. Go to your Jetpack Features page
   [yoursite.com]/wp-admin/admin.php?page=jetpack_modules]
4. Enable Google Fonts

Once that’s setup, open your Site Editor >> Click on Styles >> Typography >> Manage Fonts (Aa icon) >> Install Fonts

Once you get access to Google Fonts, search for the font and select the variants you want.

After Installation it should appear on the list of fonts in your block editor. Just the way you want it!

I mean ideally I would want a lot of fonts readily available so I could play around with it but this solution is good enough for me. It also helps to just select the fonts you want to use to save on loading time and avoid analysis paralysis! 😊

Hope this helps!