Most Popular Serif Google Fonts

Last month I shared some Google Font combinations I thought you’d fall in love with, and from the response I got, many of enjoyed that.

There’s a consensus that sites like Medium have stellar typography, and here’s what serif font from Google Fonts I’d recommend.

Below are the top 5 most popular serif fonts from Google Fonts.

1. Droid Serif

Droid Serif Google Font

2. Roboto Slab

Roboto Slab Google Font

3. Lora

Lora Google Font

4. Bitter

Bitter Google Font

5. Arvo

Arvo Google Font

Loading Google Fonts

If your website is powered by the Genesis Framework and would like to add Google Fonts, the process is extremely simple. Trust me, it really is.

Below is the code you should use to properly add Google Fonts:

SEO for Categories and Tags

I’m frequently asked about optimizing SEO from people who build their websites with the Genesis Framework. Most folks are aware of the SEO Settings page, but there are a few other SEO features that can be leveraged as well.

When you edit a category or tag in your WordPress dashboard, you have the option to fill out some fields that will help with building up your SEO presence.

You can see from the screenshot above what I’ve done for my Genesis Tutorials category. Clearly that I want to rank for “Genesis tutorials”, so I’ve written some text to better optimize my category page for SEO.

Google likes category and tag archives pages, especially when there is additional text on the page that includes the keywords that you’re hoping to rank for.

You’ll also want to go to the Genesis > SEO Settings page and make sure you don’t have the Apply noindex to Category Archives optioned checked.

If you’re looking for some really good examples of SEO optimized category pages, you can see what Rae Hoffman did on her Affiliate Marketing page or what Brian Clark did for his Boulder Real Estate page.

Customize Simple Social Icons

The Simple Social Icons plugin is an easy to use, customizable way to display icons that link visitors to your various social media profiles.

With a simple widget options interface, you can choose which profiles to show, customize the color and size of your icons, and specify the alignment of them.

The default output of the Simple Social Icons is one set of colors. However, it’s possible to use CSS for customizing the icons to match the color of their brand.

Customize the Social Icons

Below is the CSS that is required to customize each of the social media icons:

While the use of !important isn’t ideal, it is a necessary part of the code. Be sure to set the Icon Font Hover Color to #fff and the Background Color to #fff in the widget options as this will universally apply white to all social media profiles.

I hope that you enjoyed this Genesis tutorial. I have also published a list of Genesis code snippets, so feel free to use anything you see there.

Display an Author Gravatar

If you’re a fan of Medium, then you’re familiar with the way they display profile images on the user page. Here’s an example of what I’m talking about.

A few months back I was really inspired by the Medium look, so I designed the Ambiance Pro theme with a similar design style. I still really like the way it looks, and this weekend I started working on something that was focused on content.

I felt like it was missing something, though, so I decided to add a little visual stimulation to the design. You can see what I did in the screenshot below.

I don’t think all single posts should have this kind of design, but for those that do I’ll show you how easy it is to add a photo of the author at the top of the page.

Display Author Gravatar

The first step is creating a function that will output the author Gravatar and hook it above the entry title. Below is the code that you will need to do that:

Now you’ll want to style the author Gravatar, and the CSS below should give you a place to start. Obviously you may want to customize it to your own liking.

I hope that you enjoyed this Genesis tutorial. I have also published a list of Genesis code snippets, so feel free to use anything you see there.

Building a Custom Genesis Theme

I’m asked quite frequently about my workflow when I build Genesis themes. While it may vary from time to time, there’s a short list of things I do right away when developing custom themes for folks.

This was true when I developed Becoming Minimalist and Your Boulder, and also when I did my own redesign here. I thought that I’d share the first 5 things I do when building a custom Genesis theme.

1. Remove Unnecessary CSS

I like to run a lean ship, so I approach my style sheet with a minimalist mindset. If I don’t need something, I remove it before I even get started.

Examples of things in a style sheet that I’d remove would be declaration blocks for sidebars, footer widgets, and widget areas that I know I won’t be using.

2. Remove Media Queries

Even though our StudioPress themes are mobile responsive and include CSS for media queries, I make enough changes in a theme that warrants this removal.

Once I’m done designing the desktop version, I’ll go back and add in the media queries. Since I add containers and elements when building a theme, this ensures that I don’t miss anything by the time I finish.

3. Remove Approved HTML Tags

This is something that makes me cringe every time I see it on another site. I’m not exactly sure why, and my guess is that it’s very seldom used by site visitors.

You can remove the approved HTML tags container with this code:

4. Remove Layouts/Sidebars

This is something that quite honestly isn’t necessary, but I still do it. When I know that I won’t be using specific site layouts or sidebars, I feel better removing them.

You can remove the site layouts with this code:

You can remove the primary and secondary sidebars with this code:

Obviously you need to modify the code above depending on which site layouts and sidebars you won’t be using. The code above is what I used on my site, because I’m only using a full-width content site layout and no sidebars

5. Optimize Gravatars

This is a process that for me is really not necessary anymore because I’m using the Mobile First theme I created as a starter theme.

Prior to that, it was the Genesis Sample theme which, at the time, didn’t include functions and CSS to optimize Gravatars for Retina Display. If your theme doesn’t have it, and you want to do this manually, following this tutorial should help.

And there you have it … Once I get these things out of the way, I start the process of developing a custom theme for Genesis. What’s your process like?