Using custom typography elevates brand identity, but loading unoptimized font files can delay mobile page paint times by over 1.5 seconds. This guide demonstrates how to upload and render custom WOFF2 fonts with zero speed regressions.
1. Upload WOFF2 Files to Content > Files
Convert your font files to modern .woff2 format and upload them into your Shopify Admin under Content > Files.
2. Add the @font-face Rule in assets/base.css
@font-face {
font-family: 'BrandHeading';
src: url('{{ "BrandHeading.woff2" | asset_url }}") format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}