Contents
- 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.
![](https://magepow.com/blog/wp-content/uploads/2022/08/google-font-1024x534.png)
![](https://magepow.com/blog/wp-content/uploads/2022/08/google-font-2.png)
Step 2: Copy the link to the font you chose in step 1.
Choose the font styles you want to add.
![](https://magepow.com/blog/wp-content/uploads/2022/08/google-font-3-1024x494.png)
![](https://magepow.com/blog/wp-content/uploads/2022/08/google-font-4-1024x499.png)
Select copy as a link and copy link provided below option.
![](https://magepow.com/blog/wp-content/uploads/2022/08/font-15-1.png)
Step 3: Paste the link font you just copied to the Font family import input in the theme’s settings.
![](https://magepow.com/blog/wp-content/uploads/2022/08/font-10.png)
Step 4: Copy font family name
![](https://magepow.com/blog/wp-content/uploads/2022/08/google-font-6.png)
Step 5: Paste the font family name you just copied into the Font family name
![](https://magepow.com/blog/wp-content/uploads/2022/08/google-font-8.png)
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.
![](https://magepow.com/blog/wp-content/uploads/2022/07/Instructions-for-adding-font-files-to-the-Shopify-theme-1024x495.png)
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.
![](https://magepow.com/blog/wp-content/uploads/2022/08/font-11.png)
![](https://magepow.com/blog/wp-content/uploads/2022/08/font-12-1-1024x576.png)
![](https://magepow.com/blog/wp-content/uploads/2022/07/Instructions-for-adding-font-files-to-the-Shopify-theme-step-3-1-1024x549.png)
![](https://magepow.com/blog/wp-content/uploads/2022/07/Instructions-for-adding-font-files-to-the-Shopify-theme-step-3-2-1024x494.png)
Step 3: Add fonts to the page.
Add the name of the font files which you upload to the theme.
![](https://magepow.com/blog/wp-content/uploads/2022/08/font-8.png)
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).
![](https://magepow.com/blog/wp-content/uploads/2022/08/font-9.png)