Sep 07, 2023

The new Google Fonts: find what you’re looking for

A redesigned Google Fonts website helps you find the right fonts and icons for your project

Posted by


Over the past 10 years, the Google Fonts website has grown to include over 1,500 font families in over 1,000 languages and more than 6,000 Material Symbols (our variable icon set).

A site with this much choice requires better ways of exploring, browsing, searching and finding the assets people are looking for.

To improve the user experience today while giving us more flexibility for future improvements, we’ve rolled out several updates to our website.

link
Copy link Link copied

Better site navigation

We’ve updated our site navigation to use the Material 3 Navigation Rail. Just like the navigation rail on Material.io, it provides easier access to the main sections of our site: Fonts, Icons and Knowledge. You might also notice that we’ve elevated Noto to the navigation rail so that users can easily access the Noto family covering over 150 different writing systems.

link
Copy link Link copied

Improved mobile experience

Our new navigation also enhances the mobile experience using the bottom navigation bar. This makes switching between sections much more comfortable on smaller screens.

link
Copy link Link copied

Searching and filtering

Notably, the new layout also introduces a new sidebar. This is our home for all the preview and filter controls that will help you find the right font or icon for your project.

Customization, preview and search filter controls for fonts (left) and icons (right)

All the filters are now easier to reach and sectioned out meaningfully and in a way that makes it easy for us to add more over time. The language dropdown now supports filtering of the options simply by typing the name of the script you are looking for.

In our Google Fonts Knowledge section, the sidebar helps provide better orientation across the many topics that are now available.

link
Copy link Link copied

A new color palette, for light and dark mode

Since we’re huge fans of Material 3 on the Google Fonts team, we’ve updated the design to use a new Material 3 color palette in both light and dark mode.

We’re very excited about the new experience of the Google Fonts website, you can try it out now on fonts.google.com. Have a look around and tell us what you think by using the feedback functionality by clicking the little speech bubble icon in the bottom left corner.