Important note: Any adjustments you make in the code of a theme will be lost when updating. So if you use a custom font you will need to repeat these steps whenever you update your theme. If your font is not available in Shopify, you can still use it

Important note: Any adjustments you make in the code of a theme will be lost when updating. So if you use a custom font you will need to repeat these steps whenever you update your theme. If your font is not available in Shopify, you can still use it &#x2014; this just requires a small setup. This is optional and best suited if you already have a specific brand font.You can add a custom font in two ways:<ul><li data-start="1460" data-end="1531">Adobe Fonts (Typekit) &#x2013; easiest option if your font is hosted there</li><li data-start="1534" data-end="1596">Uploading font files &#x2013; if you have the font files yourself</li></ul>In both cases:<ul><li data-start="1615" data-end="1673">The font can be used for headings and/or body text</li><li data-start="1676" data-end="1707">A small code change is required</li><li data-start="1710" data-end="1750">We recommend making a theme backup first</li></ul> <h2 id="adobe-fonts-typekit">Adobe Fonts (Typekit)</h2>If your font is hosted on Adobe Fonts (Typekit):<ol data-start="2766" data-end="2972"><li data-start="2766" data-end="2814">Copy the <code data-start="2778" data-end="2786">&lt;link&gt;</code> tag provided by Adobe Fonts</li><li data-start="2815" data-end="2865">Go to Online Store &#x2192; Themes &#x2192; &#x2026; &#x2192; Edit code <img src="https://attachments.gorgias.help/JWE4j73qJb6ZlV9b/hc/gpGJBxpNkY2YXZA5/2026012109-3fa73cc0-7c33-4ec8-b7c0-75095e34fe3f-624439e4-6a54-4bc1-819c-7ce80eb6d9b9.png" style="width: 646px;" class="fr-fic fr-dib"></li><li data-start="2866" data-end="2907">Open the file: <code data-start="2891" data-end="2905">fonts.liquid</code></li><li data-start="2908" data-end="2972">Paste the Adobe Fonts <code data-start="2933" data-end="2941">&lt;link&gt;</code> tag at the top of the file and save the file <img src="https://attachments.gorgias.help/JWE4j73qJb6ZlV9b/hc/gpGJBxpNkY2YXZA5/2026012109-b4e9b4a7-5fa0-4e4d-81d0-77f3f2c6f628-e949ad2a-6c14-412d-9c88-94d1d28c89bf.png" style="width: 652px;" class="fr-fic fr-dib"></li></ol><h3 data-start="2974" data-end="2996" id="isPasted">Assigning the font</h3><ol data-start="2997" data-end="3242" id="isPasted"><li data-start="2997" data-end="3035">Open <code data-start="3007" data-end="3033">custom-properties.liquid</code></li><li data-start="3036" data-end="3140">Locate the typography variables:<ul data-start="3075" data-end="3140"><li data-start="3075" data-end="3103"><code data-start="3077" data-end="3091">--ff-primary</code> &#x2192; This is the body font</li><li data-start="3107" data-end="3140"><code data-start="3109" data-end="3125">--ff-secondary</code> &#x2192; This is the heading font</li></ul></li><li data-start="3141" data-end="3242">Replace the value with your font name (you can find your font name in Adobe Typekit), for example: <code>&apos;My Custom Font&apos;, sans-serif;</code><code> </code><div dir="ltr"><code><img src="https://attachments.gorgias.help/JWE4j73qJb6ZlV9b/hc/gpGJBxpNkY2YXZA5/2026012109-7e2e0e5d-003a-45b7-9903-25541748e06a-ed50b781-97f4-4d4a-b2d1-3deb8f660dce.png" style="width: 652px;" class="fr-fic fr-dib"></code><img src="https://attachments.gorgias.help/JWE4j73qJb6ZlV9b/hc/gpGJBxpNkY2YXZA5/2026012111-ffce4e3f-9ef5-491f-9620-d5989c2c92ce-afae1799-5b26-497b-bd34-963ccc4f1671.png" style="width: 652px;" class="fr-fic fr-dib"></div> </li></ol> <h2 id="isPasted">Uploading font files</h2>You can also upload your own font files.<h3 data-start="3326" data-end="3346" id="required-formats">Required formats</h3><ul data-start="3347" data-end="3424"><li data-start="3347" data-end="3378">Minimum: OTF and WOFF</li><li data-start="3379" data-end="3424">Recommended: EOT, WOFF2, WOFF, TTF, SVG</li></ul><h3 data-start="3426" data-end="3435" id="steps">Steps</h3><ol data-start="3436" data-end="3695"><li data-start="3436" data-end="3487">Upload the font files via Edit code &#x2192; Assets (Right click on assets folder &gt; upload and select your font files) <img src="https://attachments.gorgias.help/JWE4j73qJb6ZlV9b/hc/gpGJBxpNkY2YXZA5/2026012111-e9428a8a-4b49-4a4e-8977-89ed26d7b060-7fa68ec6-b6aa-4cd2-8f06-f038fe33f175.png" style="width: 652px;" class="fr-fic fr-dib"></li><li data-start="3488" data-end="3514">Open <code data-start="3498" data-end="3512">fonts.liquid</code></li><li data-start="3515" data-end="3573">Add your <code data-start="3527" data-end="3539">@font-face</code> declaration inside <code data-start="3559" data-end="3568">&lt;style&gt;</code> tags</li><li><pre data-start="124" data-end="701"><div dir="ltr"><code>&lt;style&gt;
 @font-face {
 font-family: &apos;My Custom Font&apos;;
 font-style: normal;
 font-weight: 400;
 font-display: swap;
 src: url({{ &apos;my-custom-font.eot&apos; | asset_url }});
 src: url({{ &apos;my-custom-font.eot?#iefix&apos; | asset_url }}) format(&apos;embedded-opentype&apos;),
 url({{ &apos;my-custom-font.woff2&apos; | asset_url }}) format(&apos;woff2&apos;),
 url({{ &apos;my-custom-font.woff&apos; | asset_url }}) format(&apos;woff&apos;),
 url({{ &apos;my-custom-font.ttf&apos; | asset_url }}) format(&apos;truetype&apos;),
 url({{ &apos;my-custom-font.svg&apos; | asset_url }}) format(&apos;svg&apos;);
 }
&lt;/style&gt;</code></div></pre></li><li data-start="3574" data-end="3612">Remove any lines for file formats you don&#x2019;t have. For example</li><li><div dir="ltr" id="isPasted"><code>&lt;style&gt; &#xA0; @font-face { &#xA0; &#xA0; font-family: &apos;My Custom Font&apos;; &#xA0; &#xA0; font-style: normal; &#xA0; &#xA0; font-weight: 400; &#xA0; &#xA0; font-display: swap; &#xA0; &#xA0; src: url({{ &apos;my-custom-font.woff&apos; | asset_url }}) format(&apos;woff&apos;), &#xA0; &#xA0; &#xA0; &#xA0; &#xA0;url({{ &apos;my-custom-font.otf&apos; | asset_url }}) format(&apos;opentype&apos;); &#xA0; } &lt;/style&gt;</code></div></li><li data-start="3574" data-end="3612">Open <code data-start="3584" data-end="3610">custom-properties.liquid</code></li><li data-start="3036" data-end="3140" id="isPasted">Locate the typography variables:<ul data-start="3075" data-end="3140"><li data-start="3075" data-end="3103"><code data-start="3077" data-end="3091">--ff-primary</code> &#x2192; This is the body font</li><li data-start="3107" data-end="3140"><code data-start="3109" data-end="3125">--ff-secondary</code> &#x2192; This is the heading font</li></ul></li><li data-start="3141" data-end="3242">Replace the value with your font name (you can find your font name in Adobe Typekit), for example: <code id="isPasted">&apos;My Custom Font&apos;, sans-serif;</code> <code id="isPasted"><img src="https://attachments.gorgias.help/JWE4j73qJb6ZlV9b/hc/gpGJBxpNkY2YXZA5/2026012111-e9db829d-a2a4-4839-8480-f56a55f6d31b-97528a73-922f-4635-bc7b-e676eae02d39.png" id="isPasted" class="fr-fic fr-dii"></code> <code id="isPasted"><img src="https://attachments.gorgias.help/JWE4j73qJb6ZlV9b/hc/gpGJBxpNkY2YXZA5/2026012111-38f6f3de-e8b0-496e-8d86-a8db24504ada-77b94cb0-85b1-430d-bf37-b414e384de5c.png" id="isPasted" class="fr-fic fr-dii"></code></li></ol>&#xA0;Save everything and enjoy your new font!

Add a custom font

The theme includes built-in pre-order functionality, allowing you to sell products before they are available. Pre-orders are automatically enabled using a product tag. Once the tag is added:. If the tag is removed, the product will return to the norm

The theme includes built-in pre-order functionality, allowing you to sell products before they are available.<h2 id="how-it-works">How it works</h2>Pre-orders are automatically enabled using a product tag.<ol data-spread="false" start="1"><li style="font-size: 16px;">Go to Shopify Admin &gt; Products</li><li style="font-size: 16px;">Open the product you want to sell as a pre-order</li><li style="font-size: 16px;">Add the tag <code dir="ltr">preorder</code></li><li style="font-size: 16px;">Save the product</li></ol>Once the tag is added:<ul data-spread="false"><li style="font-size: 16px;">All &#x201C;Add to cart&#x201D; buttons will automatically change to &#x201C;Pre-order&#x201D;</li><li style="font-size: 16px;">This applies across product pages, product cards, and featured sections</li></ul>If the tag is removed, the product will return to the normal purchase flow.<h2 id="product-requirements">Product requirements</h2>To ensure customers can place a pre-order, the product must allow purchasing.We recommend one of the following setups:<ul data-spread="false"><li style="font-size: 16px;">Inventory is available, or</li><li style="font-size: 16px;">Continue selling when out of stock is enabled, or</li><li style="font-size: 16px;">Inventory tracking is disabled</li></ul>If none of these are configured, the product may show as unavailable and customers won&#x2019;t be able to pre-order.<h2 id="optional-shopify-flow-automation">Optional: Shopify Flow automation</h2>If you are using&#xA0;Shopify Flow, you can automatically tag pre-order orders for easier processing.Example flow:<ul data-spread="false"><li style="font-size: 16px;">Trigger: Order created</li><li style="font-size: 16px;">Condition: Order contains a product with tag <code dir="ltr">preorder</code></li><li style="font-size: 16px;">Action: Add order tag (e.g. <code dir="ltr">pre-order</code>)</li></ul>This helps you:<ul data-spread="false"><li style="font-size: 16px;">Identify pre-order orders instantly</li><li style="font-size: 16px;">Separate them from in-stock orders</li><li style="font-size: 16px;">Trigger fulfillment or notification workflows</li></ul><h3 id="shopify-flow---tag-preorder-orders">Shopify flow - Tag preorder orders</h3><ul><li style="font-size: 16px;">Install the Shopify Flow app <a data-fr-linked="true" href="https://apps.shopify.com/flow" id="isPasted" class="fr-green fr-strong">https://apps.shopify.com/flow</a></li><li style="font-size: 16px;">Download this zip</li><li style="font-size: 16px;">Unzip the folder</li><li style="font-size: 16px;">Import the file via the Shopify Flow&#xA0;app.</li></ul><div class="fr-deletable gorgias-file-attachment__wrapper" contenteditable="false"><div>attach_file <a class="gorgias-file-attachment__anchor-name" href="https://attachments.gorgias.help/JWE4j73qJb6ZlV9b/hc/gpGJBxpNkY2YXZA5/2026042814-322fcd8a-e9b1-4a8a-b6af-771e872a9b02-tag%20preorder%20orders.flow.zip" target="_blank" rel="noopener noreferrer" style="color: #000000;">Tag preorder orders.flow.zip</a> 1.6KB</div>close</div> <img src="https://attachments.gorgias.help/JWE4j73qJb6ZlV9b/hc/gpGJBxpNkY2YXZA5/2026042814-0a94b91f-d613-4bd2-b1fb-ddf3bedf18e0-3ed900e9-80fe-482d-a941-bdd002292ba7.png" style="width: 683px;" class="fr-fic fr-dib">

FAQ

Add a custom font

How to setup the pre-order functionality