How to use custom font in SalesHunterThemes theme

About Using Custom Font In SalesHunterThemesClick to copy 2222

Customizing your online store’s typography is a great way to reinforce your brand’s identity and create a cohesive, visually appealing experience for your customers. While SalesHunterThemes offers a selection of pre-installed font options, you may want to incorporate your own custom fonts to achieve a truly unique look.

In this article, we’ll guide you through the process of adding custom fonts to your store with SalesHunterTheme’s themes.

Important note: If you aren’t familiar with coding, feel free to contact our Support team. Our team will be happy to assist you with any questions.

How To Use Custom Font In SalesHunterThemesClick to copy 2222

To use custom fonts with SalesHunterThemes, follow these steps:

Step 1: Prepare Your Font FilesClick to copy 2222

  1. Obtain your desired font files in a web-friendly format like TTF (TrueType Font).
  2. Convert the font files to the WOFF2 (Web Open Font Format 2) format using online tools like Font Squirrel. This format provides better compression and performance for web fonts.
  3. Ensure you have a valid license to use the font on the web.

Step 2: Upload Font Files To Your Shopify StoreClick to copy 2222

  1. In your Shopify admin, navigate to Online Store > Themes > Actions > Edit Code.

  1. Search for “Assets” and click “Add a new asset” to upload your WOFF2 font files.

Step 3: Add Font-Face Declarations To Your Theme’s CSSClick to copy 2222

  1. In the theme’s code editor, locate the “style-variables.liquid” file in the “Snippets” folder. Click on the file to start applying the custom font.

  1. Add the following code snippet at the beginning of the file, replacing “MyFont” with your font’s name, and “font_myfont.woff2” and “font_myfont.woff” with your actual font file names:

@font-face {
font-family: “MyFont”;
src: url(‘{{ “font_myfont.woff2” | file_url }}’) format(“woff2”), url(‘{{ “font_myfont.woff” | file_url }}’) format(“woff”);
}

Copy the code

For example, here I have the font name ‘MTD Goodwater Brush’ and the code will be:

Step 4: Set Your Custom Font As The Default FontClick to copy 2222

  1. In the same “style-variables.liquid” file, locate the following line:
  • If you want to apply the font for Heading elements:

–font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};

  • If you want to apply the font for other elements such as body text, button,… please find the corresponding lines with structure above. For example, to apply for body text, the lines will be:

–font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};

  1. Replace this line with the following, using your font’s name in place of “MyFont”:

–font-heading-family: ‘MyFont’;

Copy the code

For example, here I have the font name ‘MTD Goodwater Brush’ and the code will be:

  1. Adjust the font weight and style for your custom font by modifying the following lines in the same file:

–font-body-style: {{ settings.type_body_font.style }};

–font-body-weight: {{ settings.type_body_font.weight }};

Replace these lines with the appropriate weight and style values for your custom font, such as:

–font-heading-style: ‘normal’;
–font-heading-weight: ‘700’;

Copy the code

Step 5: Save And Preview Your ChangesClick to copy 2222

  1. After making the necessary changes to your theme’s code, save your changes and preview your store to ensure your custom font is applied correctly.
  2. You may need to clear your browser’s cache or try a different browser to see the changes.

If you encounter any issues or need further assistance, you can reach out to the SalesHunterThemes support team or consider hiring a Shopify Expert for more advanced customizations.

Navigate this category