Typography

Typography defines the tone and feel of your store. The Materia theme gives you full flexibility to customize all typography settings, including fonts for headings, body text, menus, and buttons.

You can use Shopify system fonts, connect Google Fonts, or upload your own custom fonts.

---

📌 Where to Find Fonts

You can download fonts from a variety of trusted sources:

• Google Fonts

• Fontesk – Sans Serif Fonts

• DaFont

• FontSquirrel

Make sure you have the rights to use the font commercially.

---

Heading Typography Settings

Customize how your headings (H1–H6) appear across the store.

---

Choose Font Source for Headings

• Shopify System Font – Default Shopify fonts for performance and compatibility

• Enable Custom Font for Headings – Toggle this ON to upload your own font

Custom Font URL for Headings

Paste the direct URL of your font file here. Supported formats:

• .ttf, .otf, .woff, .woff2, or .css font file links

Example:

plaintextCopyEdithttps://cdn.shopify.com/s/files/1/.../MightyMarinePersonalUseOnly.ttf

How to Upload:

1. Go to Shopify Admin → Content → Files

2. Upload your font file

3. Copy the file URL

4. Paste it into the Custom Font URL input

When enabled, this will override the selected system font.

---

Select Shopify Font for Headings

Choose from available Shopify fonts such as Raleway, Playfair, or Rubik. This only applies if custom font is not enabled.

---

Google Font Settings for Headings

If you prefer using a Google Font, you can paste the embed code and font name here.

Example Google Font Embed Code:

htmlCopyEdit<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap" rel="stylesheet">

Google Font Name:

Enter the exact font name (case-sensitive). Example: Secular One

---

Heading Font Size Scale (%)

Adjust the font size of all headings by a percentage.

Example:

• 100% = default size

• 120% = slightly larger

• 80% = smaller headings

---

Heading Font Weight

Set how bold the heading text should be. Common values:

• 400 = normal

• 500–600 = semi-bold

• 700+ = bold

---

Heading Text Transform

Control the letter case of your headings:

• No Transformation

• Uppercase

• Lowercase

• Capitalize Each Word

---

Heading Letter Spacing

Adjust the space between letters. Choose between:

• None

• Small

• Medium

• Large

---

Body Typography Settings

Control the look of your main text content such as paragraphs, product descriptions, and policies.

---

Choose Font Source for Body Text

Same as for headings:

• Use Shopify’s system font

• Or enable Custom Font for Body

---

Custom Font URL for Body

Upload a .ttf, .otf, or .woff font file in Shopify’s Files section and paste the URL here.

Example URL:

plaintextCopyEdithttps://cdn.shopify.com/s/files/1/.../Bounded-Regular.ttf

This will override the selected Shopify font.

---

Select Shopify Font for Body Text

Choose from Shopify-supported fonts like Poppins, Open Sans, or Inter.

---

Google Font Settings for Body

Paste the Google Font embed code and font name, just like with headings.

---

Body Font Size (px)

Set the default font size for your paragraph text. Recommended: 14px – 16px

---

Body Font Weight

Control the weight/thickness of body text.

Examples:

• 400 = normal

• 500 = medium

• 600+ = bold

---

Menu Typography Settings

Control how your navigation menu items look.

• Menu Font Style – Choose whether to use the Body Font for consistency

• Subheading Weight – Set a specific weight (e.g., 500) for submenus

---

Button Typography Settings

Buttons use your body font by default.

Button Font Weight

Control the boldness of text inside buttons. Value range: 200 (thin) to 700 (bold)

📌 Custom button fonts are not supported due to specific design consistency across themes.