Skip to content

Instantly share code, notes, and snippets.

@stewartknapman
Last active November 4, 2022 16:37
Show Gist options
  • Save stewartknapman/8659486 to your computer and use it in GitHub Desktop.
Save stewartknapman/8659486 to your computer and use it in GitHub Desktop.
Pull web fonts into Shopify's checkout from the theme settings, through a sass file located outside the theme directory. Why? ... because its cool.
/*
* Checkout.scss sits outside the Shopify theme folder so that we can pull in Boostrap and our checkout reset via scss imports.
* This will be compiled into checkout.css.liquid and saved in our theme assets folder.
* As this will be compiled into liquid we need to escape our liquid tags to prevent our compiler having a meltdown.
*
* You need to do this across two files otherwise you'll end up with an empty import rule at the top of your checkout.css.liquid
*/
// import the compiled font_import.css.liquid from our assets folder.
// note the escaped liquid.
@import url(#{'{{ "font_import.css" | asset_url }}'});
// output: @import url(//cdn.shopify.com/s/files/1/1234/5678/t/5/assets/font_import.css);
{% comment %}
/*
* font_import.css.liquid lives inside theme/assets/ and will be compiled into css by Shopify.
*
* IMPORTANT NOTE: This will only work if we are using a _non_ javascript way of importing a web font.
* e.g. <link type="text/css" rel="stylesheet" href="http://fast.fonts.net/cssapi/1234-5678.css"/>
*
* 1. Get our custom-font-embed-code from the theme settings.
* 2. Check if its a link
* 3. Split it up on the spaces and loop through the parts
* 4. Find the href
* 5. Remove the pieces of the string we don't need
* 6. pass that to the css import
*/
{% endcomment %}
{% if settings.custom-font-embed-code != blank %}
{% if settings.custom-font-embed-code contains '<link' %}
{% assign link = settings.custom-font-embed-code | split: ' ' %}
{% for attr in link %}
{% if attr contains 'href' %}
{% assign import = attr | remove: 'href="' | remove: '"/>' | remove: 'https:' | remove: 'http:' %}
@import url({{ import }});
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% comment %}
/*
* output: @import url(//fast.fonts.net/cssapi/1234-5678.css);
*/
{% endcomment %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment