Last active
November 4, 2022 16:37
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% 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