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

List Font Size (Bulleted and Numbered Lists)

.entry-content li { 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; }

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

Footer Credits Font Size

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