It’s been some time since I focused a blog post on Google Fonts, so I thought it was time to do it one again. A while back I posted what I considered the top 5 Google Font combinations, but today I want to do much better and take things a bit further.
Google places their fonts in four categories — Serif, Sans Serif, Display and Handwriting.
As a guy who loved the Georgia font back in the day, it piqued my interest to see what are the most popular serif fonts according to Google.
Without further adieu, I’d like to show you the top 10 most popular serif Google fonts. The headline for each font is 24px and the paragraph text for each font is 16px. I’ve even gone through the trouble of creating a style sheet for this so you can see what they look like.
Note – If you’re running your site on the Genesis Framework, you’ll be amazed with just how easy it is to load Google Fonts.
1. Droid Serif / Google Font
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
2. Arvo / Google Font
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
3. Lora / Google Font
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
4. Rokkitt / Google Font
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
5. Merriweather / Google Font
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
6. PT Serif / Google Font
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
7. Vollkorn / Google Font
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
8. Bitter / Google Font
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
9. Kreon / Google Font
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
10. Crimson Text / Google Font
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
I *love* Arvo, but it’s a clear example of why Google’s 4 categories are insufficient. I’ve always felt it leans more towards slab-serif than just generical serif, but there’s no slab category so they just lump it in with the rest of the serif fonts. I really wish Google would add a few more categories so we could better find what we’re looking for. That and the ability to search only for fonts with more than one style.
Slabs are great for display. While serifs are good for the printed page, I’m growing to prefer sans for large bodies of online text. A slab for large displays, a serif for heds and pulls, then a sans for body copy seem the best combination.
As for the Google serifs, Merriweather and Crimson Text are both crisp and legible.
Loving Rokkitt, I have used it on a site recently for headings. Really nice!
I likey. I have become more and more fond of Lustria from Google Fonts.
It has an elegant feel to it. I used it on my site along with your Apparition Theme.
I completely agree with the Lustria choice — so much that I used it in our Pretty Pictures theme. I’ll blame Jason Schuller for turning me onto that font.
Arvo and Bitter are my favorites on this list. I’m really a sans-serif fan for the most part…when I do go with a serif I also like the slab-serifs the best like Monica mentioned above. Nice list!!
Some great fonts there Brian – bookmarked
Definitely going to give Google Fonts a try on Genesis (although like Thauna above I also prefer sans-serifs)
ps. I always thought it was “piqued” rather than “peaked” (?)
Bitter just caught my eye- I haven’t played around with that one *yet*. I’m a bit tired otfLora to be honest, but overall- nice list!! I <3 Google Web fonts….
On another issue, how resource-demanding is Google fonts? Does it make a call on every page load? Are there less resource-intensive alternatives?
Nice collection, Brian
My faves from your list are “Droid Serif” and “PT Serif”.
I just added two new Google fonts to my site yesterday. I added ‘Russo One’ for the headline and ‘Dancing Script’ to display my tagline on the homepage. I’m diggin’ it.
However…and I’ve always wondered about this…but what is the difference between Serif and Sans Serif?
Serifs have ascenders — marks at the end of the letters — while sans serif doesn’t, hence the “sans.”
Gotcha. And I take it that the ascenders are the “decorations” on the ends/tips of the letters?
I hate to be a stickler, but I don’t think that’s accurate… (if I’m wrong, though, shoot me down!)
Pretty much all fonts have ascenders; it’s the part that sticks above the middle. http://en.wikipedia.org/wiki/Ascender_(typography)
The difference between serif/sans-serif are the little flares (or as you said, Charles, the “decorations”) at the ends of letters; serif fonts have them, and sans-serif fonts don’t: http://en.wikipedia.org/wiki/Serif
I opted for a combination of Yanone Kaffeesatz (headings) and Raleway. Both sans serif both elegant.
Nice collection here. I’d say my favorites are PT Sans (the entire PT family is great, actually) and Merriweather.
I use a lot Bitter in Graphic Design. I prefer Sans-Serif fonts for web design though.
Arvo and Merriweather are my favorite.
And the Droid Sans also very popular.
Nice list Brain. My favorite one is “Bree Serif” and its not there in this list. Will check some of the fonts mentioned by you.
Where is the Arial? hehe
Been using driod and arvo for a while now and it’s great! I think I’ll add the new ones on my list for my next project. Thanks a lot Brian!
Nice collection Brian. I mostly use Merriweather at heading section of my websites. I have an web design comapny in Melbourne and most of clients only demand Merriweather as heading font. Thanks for sharing others also.
Bookmarked
arvo and rokkit had a more distinct curve. love it. just hope slab font like museo could be in google webfont directory someday.
“Piqued.” The word is “piqued.”
Duly noted.
Can someone please explain why we need Google to have fonts on our web pages. What’s up with that? Google already permeates nearly all aspects of our on-line lives. Indeed, it seems like Google is taking over the on-line world. Seriously, can we not exist without Google? The more we use Google, the bigger and stronger Google gets and the more Google controls our on-line world and dictates standards. I would like to see articles on how to avoid using Google (analytics, fonts, etc., etc.) as much as possible.
I ever used Arvo and Kreon for heading and Droid Serif from body copy, that is because I love Georgia too and still using it on some of my design. Nice collection Brian, tweeted