Add custom fonts to your Shopify theme

Shopify provides hundreds of free fonts to use for your store. However, you need to use a custom font to get aligned with your brand guideline but it is not supported by Shopify, you can still add it to your theme. Here is a guide on how to do it:

  1. You need to have your font available first. Some fonts have licenses, so make sure you purchase them properly for your use. Our support team will not be in charge of getting your required fonts.

  2. Next, prepare two files with the format .woff and .woff2 for each font style to be added. This is to make sure that your added font is readable on all types of browsers.

  3. After having sufficient files, you upload them to the folder File in Theme settings.

    All your uploaded font files have the chain button on the right side to provide the file link for your act of copying.

  4. Next, get back to your admin dashboard, click on Online store > Themes and choose Be Yours theme to edit further. Click on Actions > Edit code.

  5. In the open edit code window, you navigate to the folder Snippets in the left-hand column. In this folder, click on the file “css-variables.liquid” to add some custom code for the new font.

  6. In the file open file “css-variables.liquid”, you add additional codes under the tab style. It can be found under the text {%- style -%}. The codes are added as follows:

    @font-face {
    font-family: "MyFontHeading";
    src: url('add your font file link') format("woff2"),
    url('add your font file link') format("woff"); }

    @font-face {
    font-family: " MyFontBody";
    src: url('add your font file link') format("woff2"),
    url('add your font file link') format("woff"); }

    Note: Italic text sections are customized by you. The number of @font-face{ } codes to be added depends on how many font styles that you have.

  7. After that, you search for the text “font-body-family” to navigate to relevant code line and replace all parts of {{...}} with your added text for font-family in the codes of step 6 (in our example, it is 'MyFontHeading'). Similarly, search for the text “font-heading-family” and replace all parts of {{...}} with your added text for font-family line ('MyFontBody' in our example).
  8. After replacing, it looks like the below photo:
  9. Finally, click Save.

Note:

  • The settings in Theme settings > Typography is no longer in effect no matter what you configure here once you add these codes in the “css-variables.liquid” file.
  • All above instructions are applicable when you apply the same custom font for all sections & block. In case you need to apply various fonts for different sections or blocks, the edit process will much more complicated and please contact our support team to get further help.

We hope that you find this article helpful! If you have any concerns about this feature, do not hesitate to contact our team for further support.

Back to Be Yours Support