What? New Google Fonts! Yes, there are now 804 free and well chosen Google Fonts available to web developers [up from 708] and a new, improved interface. Ye editor finally relented at the end of May to do a review of the Google Fonts online app; but just waiting a couple of weeks later would reveal a big improvement to the app. The number of fonts was increased by 14% to 804 and the interface to access Google fonts has been changed dramatically. Before Google Fonts was crammed with goodness, but it was rough navigating around the app with important features hidden behind icons or buttons. Not anymore. And now there are colors too:
Users can choose between 4 background colors – white, black, blue and yellow. But more importantly, the navigation is greatly simplified – Directory shows all the fonts available, Featured is the new Google blog, About tells a modest story about what Google is up to. That is it. The crucial improvements are the new simplicity and the filter sidebar on the right of the font directory screen [which can be hidden].The sidebar filters allow fonts to be displayed by a number of criteria:
The five major styles: Serif, Sans Serif, Display, Handwriting, and Monospace are featured at the top. The next filter is Sorting dropdown which offer alphabetical, trending, popular, and date added. The next dropdown, Languages, offers scripts for fifteen languages including Latin Extended for various European scripts. Then there are 4 sliders that can be activated for Number of Font Styles available, Thickness, Slant, and Width. I find these latter filter settings very handy when deciding between a select group of fonts
Choosing a Font
It is much simpler to choose and review a font. Just hover over any font on display. As soon as you do so this happens:
Here is where you can quickly explore a fonts properties for it suitability for use. Click on the first red dropdown for a choice of Sentence, Paragraph, Alphabet, Numerals, or UserCustom display choice. The screen shot above shows them in action. Again, this is a fast way to find out if say the numbers or $ and % meet your needs. Once you have decided on a font click on its name and a new screen pops up:
Here Google has collected all the information related to the font – the right sidebar lists the Font Designer, the Designer’s styling intentions, and then a pie graph showing its usage worldwide. On the lower left sidebar is the very helpful control of what other font is often paired with the selected font. The display of the pair is a headline in the selected font and a paragraph below in the paired font. Again, this is a critical aid in choosing font pairs for use on a website as show in detail below:
Note that you can easily change not only which font will be used in the headline and which in the paragraph but also individual styling of the fonts. Then when you decide which partner font works best, just click on the circled + sign to add that font to your collection.
And to add the primary font all you have to do is click on the Select This Font button.
Finally Google has not forgotten to provide ample documentation on how to use its fonts as seen below:
This is truly the icing on the cake to get Google Fonts into your website with maximum ease.
Summary
It is hard to believe but Google seems to have shed the Missing Manual syndrome associated with its apps – or at least in the case of Google Fonts.. Try them – you will get very good Typography for the Web and so font design has certainly gotten better.