It’s no secret that the days of custom web fonts have already begun. What started out by Typekit and Cufon is now being finished by Google.
There is a lot of buzz going on these days with web design and custom fonts – and more than likely you’ve seen some typography that you’d die to use. Some of these are paid fonts, which you might want not want to spend money on.
In walks Google Web Fonts – and all of your miseries (like mine) go away.
Below you will see 5 examples of Google Font combinations you should start using. And here’s how you can load Google fonts to your Genesis-powered website.
1. Oswald and Lora
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
2. Arvo and PT Sans
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
3. Ubuntu and Rokkitt
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
4. Merriweather and News Cycle
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
5. Cuprum and Junge
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Let’s Talk, How About It?
Admittedly I’m currently having a font crush on the Oswald/Lora – not only do I have that here on my site, I also used it on the new StudioPress redesign.
So which ones, if any, are you using on your site? Which are your favorite ones?
Of these, I like Ubuntu and Rokkitt. However, I kind of prefer a serif for headings and a sans-serif for body text. At least if there is going to be huge blocks of body text. For sites that are images/video centric, I prefer a serif for the body text and sans for the headings.
I will say, I’m just super stoked to see that the new stuff you are doing does have the sans in the headings and serif in the body. Your typography is at a whole new level, and I’m loving it.
Oooo, I’ll take option 2, please. So nice and clear and readable.
I like my title serif and my text sans. 
I go back and forth, depending on the week.
I like the inverse.
Thanks Brian, i’ll try osvald/lora on my website (based on metric child theme).
I love the Oswald font for headings and post info, and pretty much everything else except post content.
I have most of my blogs on the Copyblogger theme, and almost switched several over to the eleven40 theme when it was released since I loved it so much.
But in the end I decided to marry the two and so now I have my Copyblogger theme customized with the Oswald font used for title, headings, menu etc.
Excellent Alex – I’m a person who truly loves to mix and match elements and design into one theme.
I’ve used Lora for the majority, and like one called Architects Daughter. It’s slightly whimsical but looks good in uppercase on navigation, for example.
I love fonts! One of the best things about being a Designer is that I get to try out new fonts on client sites. Probably the only thing that keeps me from changing fonts on my sites weekly. I love to mix and match too!
Nice post, Brian. I’ve become a real Oswald fan through StudioPress, and am going to try it paired with Lora.
I was first introduced to the Oswald font through Studiopress’ Minimal theme. It is definitely one of my favorites. Thank you for sharing, Brian. I will definitely keep these in my tool set
I love it – thank you for the post!
“In walks Google Web Fonts – and all of your miseries (like mine) go away.”
Good to hear it Brian.
One of the great things about the recent Genesis themes is the fonts.
Big and bold and you might even add… beautiful.
I’m in love with Merriweather and News Cycle!! I might have to use them!
Heh – yeah, I’ve looked at the combos long enough today and need to turn away as I’m starting to get theme ideas because of them.
Excellent post as usual
Well I use the eleven40 theme so oswald and lora come as default but after reading this post i changed to merriweather & news cycle 
I loved oswald and lora but didn’t want the same as everyone else thats just how I roll!
Great Post as usual. I always find the link between typography and web design very intriguing. There are so many more options than ‘Arial’ and ‘Helvetica’, especially for body text. I love the combinations you have put together. I feel Google Webfonts proves to be extremely useful and has a vast array of free web safe fonts.
web fonts still look aweful on Windows though – are you all MAC users?
I’m a windows user and they look fine to me.
Among the fonts on this page, Lora and PT sans look good to me, but the rest don’t – especially Rokkit.
Designers should test web fonts on the actual website copy if possible. There’s even a free Photoshop plugin now
http://www.extensis.com/en/webfontplugin/
I’m redesigning my website, and for some reason I can’t get Windows 7 to render GFonts well. They look great on Mac and in Linux (Mint), though.
Yeah. It’s that Microsoft thing. Again.
Beautiful combinations – I’m reading this late at night here in Australia and it makes want to get my Mac and create some new sites
Brian,
Thanks for the great combinations. I’m using Google Fonts a ton lately and love how easy it is to change the tone and quality of a website.
It would be awesome if you could share some thoughts (maybe a post) sometime on where to start learning about typography. I feel like a typography rookie in many ways. I know what looks good and can spot a site with great typography pretty easily. But some of the theory behind it and the process of choosing fonts and combinations is still beyond me.
You’re welcome Aaron – it’s ridiculously easy to add Google fonts to a site, and they are so much more interesting to look at than the typical fonts – Arial, Verdana and Georgia. (as much I love Georgia.)
Brian
Speaking of Georgia, do you think it is a good combination to use for the body text if my header texts are Trebuchet? Or should I look to a different font via Google Fonts to pair with it? I like the way the body text is reading with Georgia but not sure? May be a question out of this post, but I would consider using another font family perhaps via Google fonts.
I tried this using the Junge font on one site using the Corporate theme with no problems. Very nice.
But, when I try it on the Magazine theme, I keep getting the “Play” font, and not the Junge one. I did a search and replace with no success.
Does this work on all of the StudioPress themes?
Let me quickly add, I’m using the Magazine 2.0.
I’d have to see a link to your site to help. Can you leave that?
Thanks, Brian.
It appears the issue resolved itself. I guess either my cache needed updating, or the server was slow in accepting the change. All is well now. And thanks for these helpful hints you provide. They are making it possible to present the content better.
We currently use Stint Ultra Condensed (a serif) for the post titles and PT Sans Narrow for the paragraphs – but I like News Cycle over PT Sans as it’s a little wider and easier to read! Thanks for the tip!
You’re welcome – glad to hear you’ll be making some font tweaks based on these recommendations!
Arvo and PT Sans…so pretty…so light. Dang it, now I’m going to have mess with fonts all weekend.
Heh. Welcome to world, anytime I come up with something new that I like. Change, change, change.
Using eleven40 and I see that
@import url(http://fonts.googleapis.com/css?family=Oswald);
is already in the style sheet. I’m guessing then that Genesis Child themes already call on Google Fonts? If so, anything else to do other than change the font of we feel like it?
Oooh – loving Merriweather … thanks for showing some great combos here! One to also consider, for that semi-traditional (old school professional) feel is Volkorn and Droid Sans. Just used this on a CPA firm website (on Genesis, of course!) – seemed to fit.
These look really good, will pick one for next project. I’m currently using Minion Pro/Myriad from Typekit, really happy with it so far.
I’ve gone exclusively with Google Fonts – just too easy (and free) to implement.
Oops! The embed HTML tags didn’t do what I expected. Maybe this way:
If I were to load the book, italic and bold versions of a Google font and then use the tag i (or b) in a paragraph, will WordPress use the Google italic (or bold) variant, or just “bend” (or “fatten”) the book variant?
That’s a great question Bob – maybe you should try it and see what happens and report back?
Love all these font combinations and I wanted to invite you to do another round of good Google Font combinations in a coming post.
Invitation accepted – though it might be a little while before I can get to it.
Hi Brian – I realize this is a late comment on this post – but I just checked the link for Lora – and found a serif font on Google fonts – instead of the sans that you show for the body font in your example.
Oswald is correct – but I’d like to know which body font that actually is – looks nice!
Thanks!
Hey Lisa – good catch. I just updated my new design today, and forgot to wrap the Lora sample font in a tag. If you do a hard refresh, you should be able to see it now.
I can see that you are hit by the same problem that we have noticed the last couple of days, with some letters in the News Cycle font being bolded. Oh well, I suppose even Google messes up occasionally.
Your site looks so beautiful, but I’m having problems getting Google fonts working on mine.
The link provided for “how you can add them” has so many different ways listed for how to do this, and people reporting that different methods do not work in IE7 and 8. Then, the comments stop in 2011. Is there a more up-to-date tutorial for how to implement Google Fonts in StudioPress?
In the comments above I see someone said:
“Using eleven40 and I see that:
@import url(http://fonts.googleapis.com/css?family=Oswald);is already in the [eleven40] style sheet. I’m guessing then that Genesis Child themes already call on Google Fonts? If so, anything else to do other than change the font of we feel like it?
I’m trying to edit the Chrystal child theme and I must be doing something wrong because it seems like I have to change too many styles in the style sheet. For ex. I finally got it to change in my portfolio section, but do I have to change styles on every single page? It seems like the eleven40 child theme is a lot easier and I must be misunderstanding something.
Thank you.
If you are using the Crystal theme, and want to use the Oswald font, all you need to do that @import line directly above this code at the top of the stylesheet:
body {
I use the typography tool of Lubith – I can change fonts much easier, I can directly see the results of my customization applied to the theme, plus it provides over 400 web-safe fonts and extra font editing options like line height, word / letter spacing, drop shadow, opacity etc.
You should start a font match-making service. “Dear Brian, a friend of mine–no really, it’s a friend–is in love with Arvo. Do you know any attractive fonts that might be interested? For headlines, body, and maybe something more…”
Heh, that’s a great idea. I’ve been wanting to come up with a v2 of this post as well, with at least another 5 more.
Hey, Brian. Oswald is one of my favorites that I have never used. But every time I see it, the first thing that pops up in my head is “lowercase Bebas.” I use Bebas on my site and I love how it’s tall and narrow, but bold. So when I saw your Oswald, it looked way more short and fat to me. ( screenshot: http://cl.ly/image/0I2p0H383S2U ) Makes me wonder if it’s displaying correctly on my end.
Anyway, I’m a fan of Bebas/Helvetica. Then again, I have only cared about typography for a few months. So I haven’t had time to experiment yet. I do see how important it is now, though. I wish I had cared long ago.
Ooooh, I like Junge. The serifs are there, but subtle enough to be readable for web text.
Yep, it’s one of those unique fonts that’s kind of a hybrid between the two.
Arvo and PT Sans are among my favorites. Another similar Google font combination is Bree Serif for title and Open Sans for body text. I’m using those on my StudioPress Magazine theme mod at http://themecraft.com/demo/magazine/
I like these but settled with “Francois One” and Bitter.
I like the Open Sans. It’s clean and neat. What fonts are you using here in briangardner?
I’m using Proxima Nova here on my site.
Brian,
Great combos for sure. Always looking for clean combinations, especially with Google Fonts. Challenge I see often with Google Fonts is that some don’t render as nicely as others. Trial and error pays well.
Ed
Brian, I have used Arvo and Droid Serif together. What do you think of that combo?
I think it’s ok, but not a huge fan if two serif-style fonts being used together.
As for myself I sort of liked the “News Cycle” font. It’s clean, might actually use it on the blog in the future, unless I find something a bit more legible.
Nice site Mr. Gardner.
Faithfully,
k0nsl.
My favorite combination is Oswald and Lora. Glad to have read this article. Now, I got more great options to try for my other sites. Thanks Brian. Great article.
Never saw anybody using Rokkitt font as body text, Sorry Brian but it is not readable when used as body font
I agree with @nick , sans fonts are easy to read whereas serifs look out of box. So using serif as body text is something strange, you don’t prefer to use serifs at all in this blog.
I miss previous design of this blog, huge space for headings , would love to see that in some future genesis child theme
Hi Brian,
Love Lora, but the google fonts website seems to show that it’s really slow. Just selecting Normal 400 and Normal 400 italic, and the speedometer is in the red.
Thoughts? Does this really matter? Are there ways to optimise this faster than they’re showing on the webfonts site?
Many thanks!
david
PS I like Lora as heading, paired with Open Sans as body for clean reading.
Thanks very much for these combinations.
Typography is a bit of a minefield so it’s nice to have some tried and tested combos. Definitely saved me a real headache and judging from all the comments, I’m not the only one that is grateful!
Giving Oswald a try!
I’m really digging Arvo and PT Sans. Thanks for introducing me to Arvo and reminding me about PT Sans
I’m a big fan of Google fonts, but I avoid using fonts that don’t look right in Win 7 Chrome. With that said, #1, Oswald + Lora, look great!
-RON
I love Arvo + Open Sans, but somehow if I put Arvo on the minimum theme all the content appears to be on bold. Should I move something else on the CSS or functions.php documents?
Also, I’d love to know how you added that Twitter Follow button on your optin on box.
I just wanted to comment on the posts about preferring sans serif or serif for headings and body text. I’m not a typography expert by any means, but I know that there are good readability reasons for using a sans serif typeface for headings and serif for body type. The serifs are there to help your eye recognize the characters at a small size, and not necessary at a large size.
I still use the reverse pretty often, because the readability is fine and the fonts look good. Just to say that it isn’t purely just a tossup.
P@tty @yers
I am using Play for Content and Raleway for Headings
I love the Oswald font and have installed in on the Metro child theme, but I’m seeing on both a PC and a Mac that Firefox doesn’t recognize it. It changes my headings to a rather unattractive serif font. Is this a common problem with this font/browser combo? Do you know of any fixes for this? Thanks!
Oswald is actually already part of the Metro theme for a few of the widget headlines. Got a link to your site?
This is all bullshit. Good for a larf but more light relief than illumination.
From my first day at art college, some 50 years ago now, I have always remembered what the typography teacher told me, although at my advanced years, I no longer remember his name.
He said ~ “Never forget, the typeface is the inflection in our voice when we speak in print”.
And I never did forget, my who career. From studio junior, to creative director. And it served me well.
So all this talk of who likes which combination and why is just so much hot air, until you know what you have to communicate and to whom.
Without that vital piece of information, you might as well use chalk on the sidewalk.
In fact, that might even be better.
Terence.
Great post. Trying to make use of Google fonts has been on top of my mind lately and this post has helped me to find some good font combinations in the hundreds offered. One note though, why is the Oswald font not working in the example?
It’s working on my browser — not sure I see the issue.