[TUTORIAL] How to add Google Fonts with search

Community resources Webflow Tips
1

Hi everyone! :wave:

Long time lurker here. I’ve learned a lot thanks to this forum, but today it’s my turn to give something back.

As we all know, the way to add a Google font in Webflow is to select it from a dropdown list under Project settings.

But there are more than 900 fonts on that list! This gave me the idea of creating an alternative that would make adding fonts more simple.

So I came up with a lightweight Chrome extension that replaces the current dropdown list:

63405631-dc135300-c3bd-11e9-9678-2dc48ee04c73
63405631-dc135300-c3bd-11e9-9678-2dc48ee04c731010×614 73.9 KB

It does the following:

  • Adds search functionality to the list, with autocomplete behavior.

  • Adds keyboard navigation to the list.

  • Prevents duplicate font entries on projects (can’t add the same font more than once).

  • Changes the Add Font button label to match the selected font; e.g. Add Roboto.

  • Follows accessibility tech specs according to WAI-ARIA Authoring Practices 1.1

Here’s the chrome web store link for anyone interested. Hope some of you find it useful :slightly_smiling_face:

6 Likes
2

@gianfranco thanks for this. And welcome to the forum

1 Like
3

Thanks @Steven_Harris!

4

Love this idea! Thanks.

1 Like
5

@garymichael1313 and @Steven_Harris Thank you, guys! Glad you liked it.