Skip to main content

Installing webfonts for Shopify use

  1. Before installing the font, extract the font files from the .zip file you have downloaded after your order.

  2. Next, you will need to upload the font files to your Shopify theme. This can be done by going to "Online Store" > "Themes" in your Shopify admin, then clicking on the "Actions" button for your current theme and selecting "Edit code."


  3. In the theme editor, navigate to the "Assets" folder and upload the font files there.


  4. Next, you will need to create a CSS file (or edit an existing one) and include an @font-face declaration to specify the location of the font files on the server. The following is an example of what this declaration might look like:


@font-face { font-family: "My Font"; src: url("{{ 'my-font.woff2' | asset_url }}") format("woff2"), url("{{ 'my-font.woff' | asset_url }}") format("woff"); }
  1. Once you have included the @font-face declaration, you can then apply the font to specific elements on your website by setting the font-family property in your CSS. Here's an example of how you might use the "My Font" in your CSS:
body { font-family: "My Font", sans-serif; }
  1. Finally, be sure to link the CSS file containing the @font-face declaration in the head of your theme layout file (usually theme.liquid), so that the font can be loaded and applied to your website.
<link rel="stylesheet" href="{{ 'my-fonts.css' | asset_url }}">

Note that instead of using the raw url to the font files, Shopify use the asset_url filter to reference the font files that were uploaded to the "Assets" folder.