Skip to main content

Typography Settings Guide

Welcome! This guide will help you customize the fonts used throughout your Maker theme. You can choose from four different font sources and apply them independently to different text elements on your site.

Overview​

Your theme supports four font sources:

  1. Shopify Fonts - Pre-installed fonts available directly in Shopify (default)
  2. Adobe Fonts - Professional fonts from Adobe's library (requires Adobe Fonts account)
  3. Google Fonts - Free, open-source fonts from Google
  4. Custom Fonts - Your own uploaded font files

You can mix and match! For example, use Shopify fonts for body text, Adobe fonts for headings, and custom fonts for accents - all on the same site.

Font Types Explained​

Your theme uses four different font types that you can customize independently:

  • Body - Main content text (paragraphs, descriptions, product details)
  • Heading - Large headings and titles (H1, H2 elements)
  • Subheading - Medium-sized headings (H3, H4 elements)
  • Accent - Special text elements (buttons, labels, callouts)

Each font type can use a different source, so you have complete control over your typography.

How to Access Typography Settings​

  1. In your Shopify admin, go to Online Store → Themes
  2. Click Customize on your Maker theme
  3. Click Theme settings (paintbrush icon in the sidebar)
  4. Scroll down to the Typography section

Shopify Fonts (Default)​

Best for: Quick setup, no external accounts needed, reliable performance

Shopify Fonts are pre-installed and ready to use. This is the default option for all font types.

How to Use Shopify Fonts​

  1. For each font type (Body, Heading, Subheading, Accent), make sure the font source dropdown is set to "Shopify Fonts"
  2. Use the font picker dropdowns to select your preferred fonts
  3. That's it! No additional configuration needed

Available Fonts​

Shopify provides a curated selection of high-quality fonts including:

  • Sans-serif fonts (Inter, Open Sans, Lato, etc.)
  • Serif fonts (Playfair Display, Merriweather, etc.)
  • Display fonts (Abril Fatface, Bebas Neue, etc.)

Tips​

  • Shopify fonts are optimized for web performance
  • No external requests needed - fonts load quickly
  • All fonts include proper fallbacks for maximum compatibility

Adobe Fonts​

Best for: Professional typography, brand-specific fonts, premium design

Adobe Fonts (formerly Typekit) gives you access to thousands of professional fonts. You'll need an Adobe Fonts account to use this option.

Prerequisites​

  • An active Adobe Fonts account
  • A font project created in Adobe Fonts
  • Your Adobe Fonts Project ID

Step 1: Get Your Adobe Fonts Project ID​

  1. Log in to Adobe Fonts
  2. Create a new project or open an existing one
  3. Add the fonts you want to use to your project
  4. Click on your project settings
  5. Copy your Project ID (usually looks like: abc123 or xyz789)

Step 2: Configure Adobe Fonts in Your Theme​

  1. In Theme settings → Typography, select "Adobe Fonts" from the font source dropdown for the font types you want to use
  2. Enter your Adobe Fonts Project ID in the "Adobe Fonts Project ID" field
  3. For each font type using Adobe Fonts, enter the exact font family name from your Adobe project

Finding Font Family Names​

The font family name in Adobe Fonts might be different from the display name. To find it:

  1. In your Adobe Fonts project, click on a font
  2. Look for the "CSS name" or "font-family" value
  3. This is usually lowercase with hyphens (e.g., source-sans-pro, adobe-caslon-pro)

Example Configuration​

  • Body font source: Adobe Fonts
  • Adobe Fonts Project ID: abc123
  • Adobe Font - Body font family: source-sans-pro
  • Heading font source: Adobe Fonts
  • Adobe Font - Heading font family: adobe-caslon-pro

Tips​

  • You can use the same Project ID for all font types
  • Font family names are case-sensitive - use the exact name from Adobe
  • Adobe Fonts automatically handles font weights and styles
  • If you leave a font family name blank, it will fall back to your Shopify font selection

Google Fonts​

Best for: Free fonts, wide variety, easy to use

Google Fonts offers hundreds of free, open-source fonts that work great for web use.

Step 1: Choose Your Fonts​

  1. Visit Google Fonts
  2. Browse and select the fonts you want to use
  3. Note the exact font family names (e.g., "Roboto", "Open Sans", "Playfair Display")

Step 2: Configure Google Fonts in Your Theme​

  1. In Theme settings → Typography, select "Google Fonts" from the font source dropdown for the font types you want to use
  2. In the "Google Fonts families" field, enter all fonts you'll use with their weights

Google Fonts Families Format​

Enter fonts in this format:

FontName:weight1,weight2|AnotherFont:weight1,weight2

Rules:

  • Use | (pipe) to separate different font families
  • Use + (plus) instead of spaces in font names
  • List weights after a colon (e.g., :400,700)
  • Common weights: 300 (light), 400 (regular), 700 (bold)

Examples​

Single font:

Roboto:400,700

Multiple fonts:

Roboto:400,700|Open+Sans:300,400,700|Playfair+Display:400,700

With spaces (use +):

Open Sans → Open+Sans
Playfair Display → Playfair+Display

Step 3: Assign Fonts to Font Types​

For each font type using Google Fonts, enter the font family name:

  • Google Font - Body font family: Roboto
  • Google Font - Heading font family: Playfair Display
  • Google Font - Subheading font family: Open Sans (optional - uses heading font if blank)
  • Google Font - Accent font family: Roboto (optional - uses heading font if blank)

Complete Example​

Google Fonts families field:

Roboto:400,700|Playfair+Display:400,700

Font assignments:

  • Body: Roboto
  • Heading: Playfair Display
  • Subheading: (blank - will use heading font)
  • Accent: (blank - will use heading font)

Tips​

  • Include all weights you'll use in the families field (400, 700, etc.)
  • Font names in the individual fields should match Google Fonts exactly (with spaces, not +)
  • You can use the same font for multiple types
  • Google Fonts are free and optimized for web use

Custom Fonts​

Best for: Brand-specific fonts, unique typography, complete control

Upload your own font files for complete typographic control. Perfect for custom branding or unique font requirements.

Prerequisites​

  • Font files in WOFF2, WOFF, or TTF format
  • WOFF2 is strongly recommended for best performance
  • Font files uploaded to your theme's assets folder

Step 1: Prepare Your Font Files​

You'll need font files for each weight and style you want to use:

  • Regular (weight 400, normal style) - Required
  • Bold (weight 700, normal style) - Optional
  • Italic (weight 400, italic style) - Optional
  • Bold Italic (weight 700, italic style) - Optional

File naming tips:

  • Use clear, descriptive names (e.g., heading-regular.woff2, body-bold.woff2)
  • Keep filenames lowercase with hyphens for consistency
  • Include the file extension (.woff2, .woff, or .ttf)

Step 2: Upload Font Files​

  1. In your Shopify admin, go to Online Store → Themes
  2. Click Actions → Edit code on your Maker theme
  3. In the left sidebar, click Assets
  4. Click Add a new asset
  5. Upload your font files
  6. Note the exact filenames (they must match exactly, including case)

Step 3: Configure Custom Fonts in Your Theme​

  1. In Theme settings → Typography, select "Custom Fonts" from the font source dropdown for the font types you want to use
  2. Enter the font family name (this is the name you'll use in CSS - e.g., "Blade Runner", "Custom Sans")
  3. Enter the filename for each font variant you uploaded

Example Configuration​

Heading font source: Custom Fonts

  • Custom Font - Heading font family name: Blade Runner
  • Custom Font - Heading (Regular): BLADERMF.ttf
  • Custom Font - Heading (Bold): heading-bold.woff2
  • Custom Font - Heading (Italic): heading-italic.woff2
  • Custom Font - Heading (Bold Italic): heading-bold-italic.woff2

Font Family Names​

The font family name is what you'll see in CSS. It can be:

  • The actual font name (e.g., "Blade Runner")
  • A custom name you choose (e.g., "Custom Sans", "My Heading Font")
  • Must match exactly (case-sensitive) if you use the same font for multiple types

File Format Priority​

  1. WOFF2 - Best compression, fastest loading (recommended)
  2. WOFF - Good compression, wide browser support
  3. TTF - Larger files, but universal compatibility

Tips​

  • Always include the regular weight - this is required for the font to work
  • Bold, italic, and bold-italic are optional but recommended for best typography
  • Filenames are case-sensitive - match them exactly
  • Optimize your font files before uploading (use tools like Font Squirrel's Webfont Generator)
  • Keep file sizes small for better performance (aim for under 100KB per file when possible)
  • If you use the same font family name for multiple font types, the font will only be loaded once (performance optimization)

Mixing Font Sources​

You can use different font sources for different font types! Here are some examples:

Example 1: Professional Mix​

  • Body: Shopify Fonts (Inter)
  • Heading: Adobe Fonts (Adobe Caslon Pro)
  • Subheading: Google Fonts (Open Sans)
  • Accent: Custom Fonts (Brand Font)

Example 2: Custom Branding​

  • Body: Google Fonts (Roboto)
  • Heading: Custom Fonts (Brand Serif)
  • Subheading: Custom Fonts (Brand Sans)
  • Accent: Custom Fonts (Brand Display)

Example 3: All Shopify​

  • Body: Shopify Fonts (Inter)
  • Heading: Shopify Fonts (Abril Fatface)
  • Subheading: Shopify Fonts (Inter)
  • Accent: Shopify Fonts (Inter)

Troubleshooting​

Font Not Appearing​

Check these common issues:

  1. Font source not selected - Make sure you've changed the font source dropdown from "Shopify Fonts" to your desired source
  2. Font family name mismatch - For Adobe/Google fonts, ensure the name matches exactly (case-sensitive)
  3. File not uploaded - For custom fonts, verify the file exists in your assets folder
  4. Filename mismatch - Custom font filenames must match exactly (including case and extension)
  5. Browser cache - Clear your browser cache or do a hard refresh (Ctrl+Shift+R or Cmd+Shift+R)

Custom Font Not Loading​

  1. Check file format - Ensure files are WOFF2, WOFF, or TTF
  2. Verify filename - Must match exactly (case-sensitive)
  3. Check file size - Very large files (>500KB) may load slowly
  4. Verify upload - Confirm file is in the assets folder
  5. Font family name - Ensure it's entered correctly

Adobe Fonts Not Working​

  1. Project ID - Verify your Project ID is correct
  2. Font family name - Use the exact CSS name from Adobe (usually lowercase with hyphens)
  3. Project active - Ensure your Adobe Fonts project is published/active
  4. Font added to project - Confirm the font is actually in your Adobe project

Google Fonts Not Loading​

  1. Font families format - Check the format is correct (use | to separate, + for spaces)
  2. Weights included - Ensure you've included the weights you need (400, 700, etc.)
  3. Font name - In individual fields, use the exact name with spaces (not +)
  4. Spelling - Verify font names are spelled correctly

Performance Issues​

  1. Too many fonts - Limit the number of different fonts you use
  2. Large custom font files - Optimize font files before uploading
  3. Unused weights - Only include font weights you actually use
  4. Font loading - The theme uses font-display: swap for optimal performance

Best Practices​

Performance​

  • Use WOFF2 format for custom fonts when possible
  • Optimize font files to reduce file size
  • Limit font variety - using 2-3 fonts is usually sufficient
  • Only include needed weights - don't load weights you won't use

Typography​

  • Pair fonts thoughtfully - choose fonts that complement each other
  • Maintain hierarchy - use different fonts/weights to create visual hierarchy
  • Test readability - ensure fonts are readable at all sizes
  • Consider fallbacks - the theme includes fallback fonts for reliability

Branding​

  • Consistency - use the same fonts across your site for brand consistency
  • Custom fonts - perfect for unique brand identity
  • Licensing - ensure you have proper licenses for custom fonts

Quick Reference​

Font Source Options​

  • Shopify Fonts - Default, no setup needed
  • Adobe Fonts - Requires Project ID and font family names
  • Google Fonts - Requires font families string and individual font names
  • Custom Fonts - Requires file uploads and filenames

Required vs Optional​

Shopify Fonts:

  • Font selection: Required

Adobe Fonts:

  • Project ID: Required
  • Font family names: Required for each type

Google Fonts:

  • Font families string: Required
  • Individual font names: Required for each type

Custom Fonts:

  • Font family name: Required
  • Regular font file: Required
  • Bold/Italic/Bold-Italic: Optional but recommended

Need Help?​

If you're experiencing issues:

  1. Review the troubleshooting section above
  2. Verify all settings are configured correctly
  3. Check that font files are uploaded (for custom fonts)
  4. Clear your browser cache
  5. Test in an incognito/private window

For technical support, contact your theme developer or Shopify support.

Summary​

Your Maker theme gives you complete control over typography with four font sources and four font types. Mix and match to create the perfect typographic experience for your brand!

Remember:

  • Each font type can use a different source
  • Shopify Fonts is the easiest option (default)
  • Custom Fonts give you the most control
  • Always test your font choices for readability and performance

Happy customizing! 🎨