# Typography

## New in Broadcast 6.0

### Typography styles

Broadcast now includes new typography styles and color schemes to help manage fonts, font properties, and font sizes throughout the theme. 

* Predefine your Headings font options for desktop and mobile with granular controls in the Theme Settings:

<figure><img src="/files/nJ0AZz66N8b1bUoT76Jy" alt="Typography styles settings"><figcaption><p>Customize the front, properties and sizes in the Theme Settings</p></figcaption></figure>

* Then, choose the size style in your sections:

<figure><img src="/files/9AU9XKxhY88Dwe34Viyb" alt="Typography styles within blocks"><figcaption><p>Section settings will allow you to choose the size from your predefined global setting</p></figcaption></figure>

You can also configure fonts, font properties, and font sizes for:

* Header navigation
* Body text
* Subheadings

<figure><img src="/files/pYFN2wNPPMM65pgdOAot" alt="Typography styles settings"><figcaption></figcaption></figure>

If you're updating from a previous version of Broadcast, similar to colors, you can use your live theme as a reference when setting up your new draft theme typography.&#x20;

***

## Broadcast 5 and Earlier

Broadcast uses two primary fonts: **Heading** and **Body**. You can choose these font values from a large library of professional fonts provided for free from Shopify by Google. After choosing these two font types, you can customize different elements throughout the theme with these default choices.&#x20;

<figure><img src="/files/AxNVEJpqy0RhFXmLHNY4" alt="Typography styles for older versions below 5.0"><figcaption><p><strong>Choosing fonts from the Shopify Font Library</strong></p></figcaption></figure>

### Heading

Begin by choosing a Heading font that will be used for various types of headings throughout the site:

<figure><img src="/files/3wio8tSeqOUyuEaYnvlp" alt="Typography styles for heading 5.0 and below"><figcaption></figcaption></figure>

* Adjust the default **Font size** to set the size of the heading font. Many sections and blocks allow you to override this setting with their own font size option.&#x20;
* Adjust the default **Letter spacing**. This is the spacing between each of the letters. This setting helps you configure a wide or narrow style heading.&#x20;
* You can use the checkbox option for **Uppercase** to set the default heading style to always be in uppercase. This will convert lowercase heading entries into uppercase.&#x20;

### Body text

Let's look at the body text font next. Choose a font for your primary body text, which will be used for descriptions, blog posts, product information, and more.&#x20;

<figure><img src="/files/n2jU8xAOu3tlgYnVUej7" alt="Typography styles for body 5.0 version and below"><figcaption></figcaption></figure>

### Subheadings and Navigation

Now that you've chosen both a **Heading** font and a **Body** text font, we can pick which font to use as our default choice for subheadings and navigation.&#x20;

<figure><img src="/files/XfseEaPJ5DvxMDZ9vDBe" alt="Typography styles for subheading and navigation for 5.0 and below"><figcaption></figcaption></figure>

* We've chosen the **Heading** font for our default **Subheadings** font.
* We've chosen the **Body** font as our default option for the **Navigation** links and text.&#x20;

### Navigation font size

The **Font size** setting under **Navigation** will target **both** the top menu links and the dropdown menu links:

<figure><img src="/files/phtfja7Ilh78Gz93CcJR" alt="Typography styles for navigation 5.0 and below"><figcaption><p><strong>Font size settings adjusts all navigation links</strong></p></figcaption></figure>

### Sections and Blocks

Many sections in Broadcast will have different block types, like a **Heading** block, a **Subheading** block, and a **Text** block. These blocks will use the font choices you've made in the Theme settings above.&#x20;

<figure><img src="/files/1gkGUiEWruZ4HQG59Bo4" alt="Sections and blocks"><figcaption><p><strong>Countdown section</strong></p></figcaption></figure>

* In the above Countdown section example, the Subheading block is used above the Heading block.&#x20;

### Custom fonts

The Shopify font library contains a large variety of free fonts provided by Google that you can use for your store. These professionally designed fonts are widely used in most E-Commerce stores.&#x20;

We recommend using a font from the Shopify Font Library, as it's integrated into the theme and provided by Shopify.&#x20;

If your store requires custom fonts that are unavailable in the library, you can add them manually to the theme by using some CSS and modifying the theme code.  Please remember that these fonts will not appear in the Shopify Font Library.&#x20;

We strongly recommend using a [Shopify Expert ](/support/contacting-support.md#shopify-experts)to implement this code change to your theme for the best results. Our support staff cannot assist you or make this change for you.&#x20;

{% hint style="info" %}
The font choices in the **Shopify Font Library** cannot be modified. It's managed by Shopify, and you cannot add or remove fonts into this library directly. Custom fonts can only be added using CSS and editing the Theme code.&#x20;

**Our support staff cannot assist you or make this change for you**.&#x20;
{% endhint %}

## Typography settings

To help those who are familiar with making code changes and have already done this with a previous theme, we have a video with some advanced steps:&#x20;

{% embed url="<https://www.loom.com/share/d16c72117edb4a4988d12a829a0ded54>" %}
**For advanced and experienced developers**
{% endembed %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://broadcast.presidiocreative.com/theme-settings/theme-settings/typography.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.