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

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

Button Font Size

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

Footer Credits Font Size

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