- 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.
- 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:
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.
Choose the font styles you want to add.
Select copy as a link and copy link provided below option.
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
- 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).