Fontawesome for Shopify theme (and asset_url output parameters)

When you use Shopify asset_url filter it outputs caching parameter to the end of the url. For example:

//cdn.shopify.com/s/files/X/XXXX/XXXX/t/X/assets/font-awesome.css?1234

This is great for developing themes sites, and refreshing the cdn cache, but can be hazardous when using external font-face file url’s in Shopify liquid css templates. For example:

url('//cdn.shopify.com/s/files/X/XXXX/XXXX/X/4/assets/fontawesome-webfont.svg?1234?v=4.0.3

If you want to add “Fontawesome” to your Shopify project do the following:

1. Download from “http://fortawesome.github.io/Font-Awesome/

2. Upload the font files to Shopify

  • In admin, go to “Themes > Template Editor”
  • Click on “Assets > Add new asset”
  • Upload each font file found in /fonts/ directory of Fontawesome download package

3. Upload “font-awesome.min.css” to assets folder and rename it as a Shopify liquid file “font-awesome.css.liquid”

4. Add the following to the top of your new Shopify liquid css file to get the correct font file paths for secure (ssl) and non-secure pages

{% capture font_url %}{{ 'fontawesome-webfont.eot' | asset_url | replace: 'http://','https://' }}{% endcapture %}
{% assign words = font_url | split: '?' %}
{% capture font_url_eot %}{{ words.first }}{% endcapture %}

{% capture font_url %}{{ 'fontawesome-webfont.woff' | asset_url | replace: 'http://','https://' }}{% endcapture %}
{% assign words = font_url | split: '?' %}
{% capture font_url_woff %}{{ words.first }}{% endcapture %}

{% capture font_url %}{{ 'fontawesome-webfont.ttf' | asset_url | replace: 'http://','https://' }}{% endcapture %}
{% assign words = font_url | split: '?' %}
{% capture font_url_ttf %}{{ words.first }}{% endcapture %}

{% capture font_url %}{{ 'fontawesome-webfont.svg' | asset_url | replace: 'http://','https://' }}{% endcapture %}
{% assign words = font_url | split: '?' %}
{% capture font_url_svg %}{{ words.first }}{% endcapture %}

5. Replace file paths in the Shopify liquid css file with new variables

  ....
  @font-face{
  font-family:'FontAwesome';
  src:url('{{ font_url_svg }}?v=4.0.3');
  src:url('{{ font_url_eot }}?#iefix&v=4.0.3') format('embedded-opentype'),
    url('{{ font_url_woff }}?v=4.0.3') format('woff'),
    url('{{ font_url_ttf }}?v=4.0.3') format('truetype'),
    url('{{ font_url_svg }}?v=4.0.3#fontawesomeregular') format('svg');
  ....

5. Add the css to your Shopify theme liquid file.

{{ 'font-awesome.css' | asset_url | stylesheet_tag }}

6. Start using it by adding HTML mark-up to your templates.