---
title: "How to Customize your Typography in the Storefront Theme"
description: "As we continue our series on the Storefront theme, we will now show you how to customize your Typography. This can help brand your WooCommerce store by making the colors match your brand or better..."
url: https://www.inmotionhosting.com/support/edu/wordpress/customize-typography/
date: 2018-03-01
modified: 2020-10-12
author: "InMotion Hosting Contributor"
categories: ["WordPress Tutorials"]
type: post
lang: en
---

# How to Customize your Typography in the Storefront Theme

As we continue our series on the [Storefront theme](https://www.inmotionhosting.com/support/edu/wordpress/themes/install-storefront-woocommerce-plugin/), we will now show you how to **customize your Typography**. This can help brand your WooCommerce store by making the colors match your brand or better suit your website style. We will walk you through changing your *heading*, *text* and *link/accent* color. We will also show you the results of the color change.

## Customize Storefront Typography

1. [Log into your WordPress Dashboard](https://www.inmotionhosting.com/support/edu/wordpress/logging-into-wordpress-dashboard/).
2. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_set-site-identity_customize-appearance.png)](/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_set-site-identity_customize-appearance.png) In your navigation menu click **Appearance** then **Customize**.
3. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-typography_customize-typography.png)](/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-typography_customize-typography.png) Click the **Typography** link.
4. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-typography_select-heading-color.png)](/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-typography_select-heading-color.png) Under the *Heading color* option click the **Select Color** button then choose your color. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-typography_heading-color.png)](/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-typography_heading-color.png) The changes will be displayed immediately.
5. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-typography_change-text-color.png)](/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-typography_change-text-color.png) Under *Text color* click the **Select Color** button, then choose your new text color. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-typography_view-new-text-color.png)](/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-typography_view-new-text-color.png) Your new text color will be displayed immediately.
6. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-typography_select-link-color.png)](/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-typography_select-link-color.png) Under **Link / accent color** click the **Select Color** button and choose your new link color. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-typography_view-new-link-text-color.png)](/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-typography_view-new-link-text-color.png) You will see your new link color displayed immediately.
7. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-typography_publish-customized-typography.png)](/support/wp-content/uploads/2018/03/wordpress_woocommerce_storefront_customize-typography_publish-customized-typography.png) After changing your *Typography* click the **Publish** button to save it.

Congratulations, now you know how to **customize your Typography** in WordPress using the Storefront theme. In the next guide we will show you how to customize your Layout in the Storefront Theme.