5.1.9.3 - Font Licensing: Google Fonts vs. Custom Licenses (Difficulty: Advanced | Path: Launch)

Lesson Summary

Fonts are Software: Licensing and Performance

The Hidden Trap of 'Free' Fonts

Many beginners download a 'cool font' from a free site and upload it to Shopify. Warning: Fonts are software, and they are protected by copyright. Using a 'Personal Use Only' font on a commercial store can lead to a lawsuit. Additionally, uploading raw font files (.ttf or .otf) can slow down your website significantly.

The Safe Bet: Google Fonts (Shopify Built-in)

Shopify's font library is powered largely by Google Fonts.
Pros:
1. Free & Commercial Safe: They are Open Source, meaning you can use them for business without paying fees.
2. Fast Loading: They are optimized for the web. Shopify's servers deliver them quickly to customers globally.
3. Zero Maintenance: No file conversions or code tweaks needed.

The Advanced Path: Custom Licensing

If you want to use a premium font (like 'Futura' or 'Proxima Nova') that isn't in the library, you must buy a Webfont License (often different from a Desktop license). You then need to convert the file to .WOFF2 format (Web Open Font Format 2.0), which is compressed for speed.

Real-Life Example: The Slow Site & The Lawsuit

We worked with a brand that 'found' a famous font online and uploaded the 5MB .TTF file to their theme.
Result 1 (Speed): Their site took 4 extra seconds to load on mobile because the phone had to download the huge font file before showing any text.
Result 2 (Legal): Six months later, they received a Cease & Desist letter from the type foundry demanding $5,000 for unauthorized commercial use.
The Fix: We switched them to a similar-looking Google Font (Montserrat). The site speed doubled, and the legal risk vanished.

Do's and Don'ts

• Do: Stick to the Shopify Font Library for your first year. It has hundreds of excellent options.
• Do: Use .WOFF2 files if you must upload a custom font. They are 30-50% smaller than TTF files.
• Don't: Use more than 2-3 font weights (e.g., Regular, Bold, Italic). Loading 'Thin', 'Medium', 'Semi-Bold', 'Extra-Bold', and 'Black' versions adds massive code bloat to your site.