Genesis - How to change font sizes in your theme

Would you like to increase or decrease the size of a particular font in your theme? Below are code snippets for various theme areas. Feel free to change the pixel value (i.e. 15px) to your desired size!

How to add code snippets to your theme

  1. Copy desired code snippet below.
  2. Go to your WordPress dashboard > Appearance > Customize > Additional CSS.
  3. Paste the code snippet in the box. Click Publish.
  4. You may need to clear your browser cache if you don't see the changes on your site.

Header Font Size

.site-title, .site-title a, .site-title a:hover { font-size: 48px; }

Description/Tagline Font Size

.site-description { font-size: 14px; }

Navigation Font Size

ALL navigation:

.genesis-nav-menu a { font-size: 12px !important; }

Primary navigation only:

.nav-primary a { font-size: 12px; }

Secondary navigation only:

.nav-secondary a { font-size: 12px; }

Header Right navigation only:

.site-header .header-widget-area .widget_nav_menu li a { font-size: 12px; }

Drop-down menus only:

.genesis-nav-menu .sub-menu a { font-size: 15px; }

Body / Text / Paragraph Font Size

body, .entry-content p { font-size: 15px; }

Input Font Size

This is the font size for input boxes in forms, including the contact form, search bar, comment form, subscription boxes, etc.

input, select, textarea, .nf-form-content .ninja-forms-field { font-size: 15px !important; }

List Font Size (Bulleted and Numbered Lists)

.entry-content li { font-size: 15px; }

Headings Font Size (H1, H2, etc)

You can either add copy all 6 of these and add them to your theme, or just the one(s) you need.

h1 { font-size: 34px; }

h2 { font-size: 30px; }

h3 { font-size: 28px; }

h4 { font-size: 24px; }

h5 { font-size: 22px; }

h6 { font-size: 18px; }

Post Title Font Size

.entry-title { font-size: 24px; }

Depending on your theme and how things are coded, you may need an !important tag. Use this if you find the post title font sizes do not change after adding the version above:

.entry-title { font-size: 24px !important; }

Post Title Font Size (on Category Pages)

.category.archive .entry-title { font-size: 20px; }

Page Title Font Size

This will include page titles, category page titles, portfolio page titles, and shop page titles.

.archive-title,
.page .entry-title,
.page.page-template-default:not(.home) .entry-title,
.woocommerce .page-title,
.woocommerce .archive-title { font-size: 24px !important; }

Blockquote Font Size

.entry-content blockquote, .entry-content blockquote p { font-size: 22px; }

Sidebar Title Font Size

.sidebar .widget-title { font-size: 16px; }

Image Caption Font Size

figcaption, figcaption a, .wp-block-image figcaption, .wp-block-image figcaption a {
    font-size: 12px !important;
    text-align: center; }

Sidebar "About" Bio Font Size

#about { font-size: 16px; }

Social Icons Size

The below code will increase every social icon size by 2px. If you need to increase/decrease the size, change each one the same amount (i.e. if one section is 14px and the other is 15px, change them both by the same amount).

.icon-pinterest,
.icon-gplus,
.icon-tumblr,
.icon-youtube,
.icon-instagram {
    font-size: 14px; }
.icon-facebook {
    font-size: 15px; }
.icon-heart,
.icon-twitter {
    font-size: 15px; }
.icon-rss {
    font-size: 11px; }
.icon-email {
    font-size: 16px; }

Search Icon Font Size

If your theme has a search icon at the top right corner of your theme (inside the top navigation menu), the following code snippet can be used to increase the font size of the search icon.

li a.icon-search:before {
    font-size: 14px; }

Button Font Size

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.widget .button,
.archive-pagination li a,
a.more-link {
    font-size: 12px; }

Post Meta Font Size

.entry-header p.entry-meta, .entry-footer p.entry-meta {
    font-size: 11px !important; }

Breadcrumb Font Size

.breadcrumb {
    font-size: 15px; }

Author Box Title Font Size

.author-box-title {
    font-size: 24px; }

3-Column Footer Font Size

.footer-widgets,
.footer-widgets p,
.footer-widgets li,
.footer-widgets li a {
    font-size: 16px; }

3-Column Footer Widget Title Font Size

.footer-widgets .widget-title {
    font-size: 20px; }

Footer Credits Font Size

.creds,
.custom-footer,
.creds p,
.footer-menu a {
    font-size: 10px; }