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; }

Body Font / Text Font Size

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

Post Title Font Size

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

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; }

Sidebar Title Font Size

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

Navigation Font Size

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

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-instagram {
    font-size: 14px; }
.icon-facebook {
    font-size: 15px; }
.icon-twitter {
    font-size: 15px; }
.icon-rss {
    font-size: 11px; }
.icon-email {
    font-size: 16px; }<br>

Button Font Size

.widget .button,
.archive-pagination li a,
a.more-link {
    font-size: 12px; }

Footer Credits Font Size

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