Google Web Fonts has a whole new interface. You can add hundreds of free, open-source fonts in three easy steps.
- Choose from hundreds of font families and add the ones you like to your collection.
- Compare the styles you select, even in dynamic sample layouts!
- Using your new found web optimized Google Web Font is as easy as ever, there are more options, too!
I love this new interface:
You can sort, search and filter the fonts. You can even adjust the size of the fonts you’re searching through. So, if you’re looking for a font for a headline or title, you can search through the fonts in the size you’ll be using.
As you find fonts that you like, add them to your collection:
As you add them to your collection, they stack-up on the bottom and can be easily removed.
Notice the list of fonts added to the collection. They use the corresponding font to what’s listed. If you don’t recognize the font name, you’ll recognize the style. A simple thing, but really useful when you’re searching and adding fonts to your collection.
The search pane can be adjusted in three different ways, by selecting the tabs at the top.
The first way is by word:
The second is by sentence:
And finally, the third way is by paragraph:
You can select the text that you see in the preview, too:
- The Font name.
- Grumpy wizards make toxic brew for the evil Queen and Jack.
- The quick brown fox jumps over the lazy dog.
- The alphabet.
- And my favorite: Enter your own text!
After searching through the hundreds of font families, it’s time to review them:
All of the fonts you add to your collection, can then be compared side-by-side and in five different formats.
- Specimen (pictured above).
- Styles – normal, bold, etc …
- Test Drive – this drops the font into a wire-frame mock webpage view.
- The full character set – A, B, C …
- Description – This can be entertaining at times.
Again, you can adjust the font size and preview text. Also, at anytime, if you click on a font’s “pop-out”, you get the full character set info:
So, you’ve found what you like?
Now it’s time for the third and final step: Click use.
This is my favorite addition to Google’s new interface:
Page load time.
In the above screen, I have one font selected.
What happens if I want to add multiple Google Web Fonts?
Increased page load.
Once you’ve decided which font, or how many you want to use, it’s time to grab the code.
Google gives three options:
- Standard
- @import
- JavaScript
Google Web Fonts is pleasing to the eye, easy to use, and the number of options to find the perfect font should please the deepest lover of typography.
I absolutely love the new Google Web Fonts 2.0.
Craig Allen says
LOVE this! I was getting so tired of having to install the font on my site to see what my text would look like. This is going to save me SO MUCH TIME.
Eric Dye says
So, so slick.
Allan W. says
This is huge! Thanks for the tour. Most excellent.
What’s your experience with these rendering on mobile devices? I’ve heard reports of a mixed bag (though not specifically with Google Fonts, just web fonts in general).
Eric Dye says
Same here.
Anyone had any problems on mobile devices?
I think it varies on the mobile device/carrier, since it has to pull them.
Dustin W. Stout says
I’ve been waiting for them to add to this product. I’m also curious as to the rendering on mobile devices.
Eric Dye says
I think the key is not to rely to heavily on them. Worst case scenario, the mobile device uses a generic font.
Right?
Allan White says
Yep – I stick to article headers and maybe pullquotes.
Degradation would depend on the method used (3 listed). Will have to test.
Webfonts add that extra spice I crave!
Eric Dye says
I’m a sucker for them, too.
At least there are multiple ways to add them, now. Let us know what you find out in your testing (maybe you can pen something for us about it, too).
Neil @ Looking Towards Home says
Hey there! This looks nice! I’m thinking of moving from arial to some google fonts as titles on my WP site. Has anyone here tried this? Is it easy (for a real newbie?)
Eric Dye says
Are you self-hosted or dot-com?
Neil @ Looking Towards Home says
self-hosted…?
Eric Dye says
Sorry! I thought you were on WordPress – LOL!
Google gives good instructions, so even a “newbie” can do it.
Holler if you get stuck.