Instructions for adding Google font and files font to the Shopify theme.

Many times, we want to add a font to our Shopify theme, but that font is not available on Google fonts. In this article, I will show you how to add font files to the Alothemes Shopify theme.

To import font files in Alothemes Shopify theme, please follow these steps:

1. Add Google font:

Step 1: Go to the Google font page and find the font you want to add.

Step 2: Copy the link to the font you chose in step 1.

Choose the font styles you want to add.

Select copy as a link and copy link provided below option.

Step 3: Paste the link font you just copied to the Font family import input in the theme’s settings.

Step 4: Copy font family name

Step 5: Paste the font family name you just copied into the Font family name

Step 4: Save and see the results.

2. Add font files:

Step 1: Login and select the theme to add font.

Login to Admin Panel > Select Online Store > Select theme you want to add font file > Click Action > Select Edit code.

Step 2: Add font files to the page.

Get the font file (.woff, .woff2, .eot, .svg format) you want to add to the assets folder

Note: Files with the .ttf extension cannot be pushed directly on your edit code.

Step 3: Add fonts to the page.

Add the name of the font files which you upload to the theme.

Add font family name according to the following syntax

  font-family: 'FontName', style_font

Note:

• style_font: The font name you want to call (usually the same as the font file name you import).
• style_font: typeface of the font. It includes Serif, Sans serif, Slab Serif, Script Font, Decorative Fonts( Display Fonts).

Step 4: Save and see the results.