Installing webfonts for Shopify use
Before installing the font, extract the font files from the
.zipfile you have downloaded after your order.
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."
In the theme editor, navigate to the "Assets" folder and upload the font files there.
Next, you will need to create a CSS file (or edit an existing one) and include an
@font-facedeclaration to specify the location of the font files on the server. The following is an example of what this declaration might look like:
- Once you have included the
@font-facedeclaration, 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:
- Finally, be sure to link the CSS file containing the
@font-face declarationin the head of your theme layout file (usually theme.liquid), so that the font can be loaded and applied to your website.
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.