Google Fonts has been an invaluable tool in web design when it comes to finding the perfect fonts to use on your website. Launched in 2010, Google Fonts became a fantastic place to search for web fonts that could be viewed properly on most desktop and mobile browsers. With Google’s Material Design now applied to the Google Fonts page it looks beautiful and is easier than ever to find that perfect font for your website.
According to Google they put a lot of thought into the new design:
Using the Material Design framework, we created a design that scales across different screen sizes and devices, and updated the entire look and feel of the site, from the overall interactivity all the way down to the logo design.
Custom Text With Style Options
The updated Google Fonts design lets you easily change the text that is being used to display the font. Many of the fonts have style options for the font weights and italics. If the font has those options you can select the option you would like to see and it instantly changes if for you.
Background Color Options
Fonts look different on different color backgrounds. You now have 4 different background colors to see how the fonts look. There are white, black, yellow and blue backgrounds as options.
Font Details
Once you’ve found a font you like, click on the name of that font and it will bring a up a detailed page for the font with a closeup of a letter, examples of how the font looks for each letter, a bio of the designer and a description that tells about the font. Here is what it looks like for the font Maitree:
Font Pairing
Choosing a font is more than just finding one that you think looks cool. It needs to be easy to read and it should be obvious which parts of the text are headings and which parts are body text. Using different fonts for the headings and body is called pairing. You want to find fonts that compliment each other and make reading your information pleasant. In the detailed information for each font, Google Fonts now includes some font pairings as suggestions. You pick your two fonts and then adjust them the way you want. In this example Maitree, set to semi-bold, is the heading font and for the body it has Kanit, set to light:
I love the new Google Fonts Material Design
When I first heard that Google Fonts was getting the Material Design makeover I figured it was just going to be a color/styling change. All of these new changes make Google Fonts an even easier way to find the perfect fonts for your new website. Once your done checking out the new Google Fonts, let me know what you think in the comments below.