Broadcast v6.2 has been released - Learn more about
What's new
Broadcast Documentation
NewSupport
Latest version
Latest version
  • About Broadcast
    • Broadcast theme documentation
    • Feature requests
  • Updates
    • What's new in Broadcast
      • Release Notes
      • About v6.2 release
      • About v6.1 release
      • About v6.0 release
      • About v5.8 release
      • About v5.7 release
      • About v5.6 release
      • About v5.5 release
      • About v5.4 release
      • About v5.3 release
      • About v5.2 release
      • About v5.1 release
      • About v5.0 release
      • About v4.0 release
  • Sections
    • Broadcast sections
      • Demo store sections
      • Accordion
        • Text column
        • Image column
        • Icon column
        • Custom code
        • Contact form
      • Accordion group
        • Heading
        • Question
      • Before and After
        • Heading
        • Subheading
        • Text
        • Button
      • Blog posts
      • Collection list
        • Collection
      • Collection list hover
        • Collection
      • Countdown timer
        • Subheading
        • Heading
        • Text
        • Buttons
      • Contact form
        • Email
        • Message
        • Text line
        • Text area
        • Telephone
        • Heading
        • Spacer
        • Single checkbox
        • Select dropdown
        • Radio buttons
      • Custom code
      • Custom content
        • Image
        • Text
        • Newsletter
        • Testimonial
        • Product
        • Video
        • Collection
        • Before and after
      • Divider
      • Featured blog posts
        • Featured post
      • Featured collection
      • Featured product
      • Highlights
        • Highlight
      • Image banner
        • Heading
        • Text
        • Single button
        • Side by side buttons
        • Custom code
      • Image with product
        • Heading
        • Text
        • Single button
        • Side by side buttons
        • Custom code
      • Image with scrolling text
        • Scrolling text
        • Heading
        • Text
        • Button
      • Image with text
        • Heading
        • Subheading
        • Text
        • Button
        • Divider
        • Accordion
        • Image
        • Video
        • Product
        • Collection
        • Custom code
      • Image with text slider
        • Text slide
      • Map
      • Multicolumn
        • Image
        • Icon
        • Text
        • Menu
        • Product
      • Newsletter
        • Image
        • Text
        • Newsletter
      • Press logos
        • Logo with header
        • Logo with text
      • Products with image
        • Products
        • Image
      • Recently viewed products
      • Rich text
        • Heading
        • Subheading
        • Text
        • Button
        • Image
        • Divider
      • Rich text with columns
        • Heading
        • Text
        • Buttons
      • Scrolling text
        • Heading
        • Text
        • Free shipping message
        • Custom code
        • Image
        • Collection
        • Advanced text
      • Shop the look
        • Product
      • Sidebar
        • Header
        • Accordion
        • Text
      • Slideshow
      • Tab collections
        • Collection
      • Testimonials
        • Testimonial
      • Text columns with icons
        • Icon
      • Text columns with images
        • Image
      • Text promo
        • Button
        • Heading
        • Text
      • Text with products
        • Collection
        • Product
        • Image
      • Timeline
        • Timeline
      • Video
  • Theme settings
    • Theme settings
      • Colors
      • Typography
      • Buttons
      • Layout
      • Search
      • Social media
      • Product Grid
      • Product Form
      • Cart
  • Header
    • Announcement bar
      • Announcement bar settings
      • Free shipping message
      • Countdown timer
      • Text announcement
      • Custom code
      • Target settings
    • Header
      • Demo store header settings
      • Header section
      • Navigation images
      • Quantity indicators
      • Transparent header
      • Header icons
      • Social icons
      • Sticky header
      • Target settings
    • Toolbar
      • Header toolbar
      • Video walkthrough
    • Mobile menu
      • Getting started
      • Mobile menu blocks
  • Footer
    • Footer settings
    • Footer blocks
      • Link list
      • Newsletter
      • Social
      • Text
      • Page
  • Products
    • Product pages
      • Accordion section
      • Custom form field
      • FAQ Accordions
      • Final Sale
      • Free products
      • Low inventory message
      • Out-of-stock notification
      • Pre-order using metafields
      • Pre-order products using tags
      • Related products
      • Sale items
      • Settings and layout
      • Siblings
      • Size charts
      • Swatches (Updated)
      • Swatch collection styles
      • Tabs and accordions
      • Tab content using metafields
      • Unique image banners
      • Upselling
      • Variant images
  • Product Theme Blocks
    • Title
    • Price
    • Variant picker
    • Buy buttons
    • Siblings
    • Description
    • Upsell
    • Inventory countdown
    • Sharing
    • Local pickup
    • Text
    • Custom code
    • Icon
    • Divider
    • Line item property
    • Feature
    • Complementary products
    • Popup
  • Collections
    • Collection pages
      • Collection page settings
      • Swatch collection styles
      • Product badges
      • Product badges with metafields
      • Product filtering
      • Quick add
      • Sub-collections
      • Cutline second line
      • Featured image
  • Pages
    • Page templates
      • Demo store about page
      • Creating page templates
      • Page section
      • About page templates
  • Blogs
    • Blogs and articles
      • About blogs and articles
      • Featured posts
      • Article page
      • Product links in blog posts
      • Article theme blocks
  • Overlay
    • Popups
      • Popups Theme Blocks
      • Large newsletter
      • Text promo
      • Small newsletter
      • Cookie consent
      • Coupon codes
      • Popup Behavior and Target
  • Promotions
    • Upselling
      • Upselling with metafields
      • Upselling with tags
  • Siblings
    • Product siblings
      • About product siblings
      • How to setup siblings
      • Siblings metafields
      • Siblings color
      • Siblings collection
      • Siblings product setup
      • Siblings block
      • Customizations
  • FAQ
    • Frequently asked questions
      • How to update Broadcast
      • Default theme content
      • Share preview link
      • Hiding prices
      • How to use sections
      • Section blocks
      • How to remove Powered by Shopify
      • Improving the speed of your site
      • How to prevent your images from getting cropped
      • Check your theme version
      • CSS customizations
  • License
    • Theme license
  • Support
    • Contacting support
    • Hire a Shopify Expert
    • Missing Cart Drawer after Updating
Powered by GitBook
On this page
  • New in Broadcast 6.0
  • Typography styles
  • Broadcast 5 and Earlier
  • Heading
  • Body text
  • Subheadings and Navigation
  • Navigation font size
  • Sections and Blocks
  • Custom fonts
  • Typography settings
Export as PDF
  1. Theme settings
  2. Theme settings

Typography

Setting up the primary heading and body fonts for your site

PreviousColorsNextButtons

Last updated 19 hours ago

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:

  • Then, choose the size style in your sections:

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

  • Header navigation

  • Body text

  • Subheadings

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.


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.

Heading

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

  • 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.

  • 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.

  • 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.

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.

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.

  • 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.

Navigation font size

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

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.

  • In the above Countdown section example, the Subheading block is used above the Heading block.

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.

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

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.

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.

Our support staff cannot assist you or make this change for you.

Typography settings

Settings
Type
Description

Header navigation

Font

font_picker

Selects the font for the site’s navigation.

Font size

range

Sets the size of the navigation text in pixels.

Letter spacing

range

Adjusts spacing between letters.

Uppercase

checkbox

Toggles uppercase styling for navigation text.

Body text

Font

font_picker

Font for general body content.

Base size

range

Sets the default body text size.

Letter spacing

range

Adjusts body text spacing.

Subheadings

Font

font_picker

Font for subheading text.

Letter spacing

range

Letter spacing for subheadings.

Uppercase

checkbox

Toggles uppercase style for subheadings.

Desktop size

range

Font size for desktop subheadings.

Mobile size

range

Font size for mobile subheadings.

Headings

Font

font_picker

Font for main headings.

Letter spacing

range

Controls spacing between heading letters.

Uppercase

checkbox

Applies uppercase styling to headings.

Desktop sizes

Mini

range

Smallest heading size.

Extra small

range

Range: 10–50px.

Small

range

Range: 10–75px.

Medium

range

Range: 10–100px.

Large

range

Range: 10–150px.

Extra large

range

Range: 10–200px.

Mobile sizes

Mini

range

Smallest heading size on mobile.

Extra small

range

Mobile extra small heading.

Small

range

Mobile small heading.

Medium

range

Mobile medium heading.

Large

range

Mobile large heading.

Extra large

range

Mobile extra large heading.

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:

We strongly recommend using a to implement this code change to your theme for best results. Our support staff cannot assist you or make this change for you.

For advanced and experienced developers
Customize the front, properties and sizes in the Theme Settings
Section settings will allow you to choose the size from your predefined global setting
Choosing fonts from the Shopify Font Library
Font size settings adjusts all navigation links
Countdown section
Shopify Expert