Use Typekit Fonts with Shopify

First, sign up for typekit or login.

Then create a kit, and add some fonts to it. Don’t forget to publish changes to the web. Be patient, it takes a few minutes for changes to propagate.

Get your embed code from typekit. It will be something like this:

<script type="text/javascript" src="//<your-code-here>.js"></script>
<script type="text/javascript">// <![CDATA[ try{Typekit.load();}catch(e){} // ]]></script>

Write down the code. It will be something like “fdy5jae”.

Create a new setting in Shopify to record the code somewhere in config/settings.html:

<fieldset><legend>My options</legend>
<td><label for="typekit_id">Typekit ID </label></td>
<td><input class="long text" id="typekit_id" type="text" name="typekit_id" value="" /></td>

Also in config/settings.html, add the correct font option elements to the font select boxes. EG: In this example, using font-family Proxima Nova.

      <td><label for="text_font">Text Font</label></td>
        <select name="text_font" id="text_font">          
          <optgroup label="Sans-serif">
            <option value="'Helvetica Neue', Helvetica, Arial, sans-serif" selected="selected">Helvetica/Arial</option>
            <option value="'proxima-nova', Arial, sans-serif">Proxima Nova Typekit</option>

Set default values in config/settings_data.json:

 "current": "Slate",
 "presets": {
   "Slate": {
   "logo_font": "'proxima-nova', Arial, sans-serif",
   "nav_font": "'proxima-nova', Arial, sans-serif",
   "text_font": "'proxima-nova', Arial, sans-serif",
   "headings_font": "'proxima-nova', Arial, sans-serif",
   "accent_font": "'proxima-nova', Arial, sans-serif",
   "typekit_id" : "<your-code-here>"

In Shopify, edit layout/theme.liquid file with this snippet in between your opening and closingtags:

{% if settings.typekit_id.size > 0 %}
<script type="text/javascript" src="//{{ settings.typekit_id }}.js"></script>
<script type="text/javascript">// <![CDATA[ try{Typekit.load();}catch(e){} // ]]></script>
{% endif %}

In your CSS, use your font-family names as usual.

Have fun with licensed fonts on Shopify!

4 Replies to “Use Typekit Fonts with Shopify”

    1. This method places a setting in your Theme Settings so you can change the Typekit code – this is most useful when you are developing themes for sale that might be used by various companies, or if you want to offer various font options. I hope you find it useful too!

  1. I am under config/settings.html …. where on this page do i add this new setting code? and do i need to change anything on the code? for example I want to add john doe font from typekit to my shopify site

    Hope you can help 🙁

Comments are closed.