How can I add a custom font to my local theme?

nesna
New Member
6 0 0

I would like to add a custom font to my local theme. Does anyone have any idea how to do that?

Replies 3 (3)

GemPages
Shopify Partner
5589 1261 1218

Hello @nesna 

You can refer to the following instructions.

https://ezfycode.com/blog/add-custom-fonts-to-shopify

https://community.shopify.com/c/shopify-design/adding-custom-fonts-to-shopify/td-p/1703100

 

Kind & Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
PageFly-Victor
Shopify Partner
7865 1785 3066

Hi @nesna 
This is Victor from PageFly - Shopify Page Builder App
You can follow my steps below to upload your custom font. 

Uploading your font

To get started, you will first need to upload the font into the Assets folder of your theme.

  1. To get to the Assets folder of your theme, navigate to your Shopify dashboard. From here, go to: Online Store > Actions > Edit Code

  2. Scroll down till you find the Assets folder and click add a new asset, select your font file and hit upload asset.

Installing your font in your theme

Next up: telling your theme that it can use the font file that you have uploaded.

  1. Go to your theme's main CSS file (usually named styles.scss.liquid, theme.scss.liquid, or another variation of this). This file can be found in the Assets folder of your theme - navigate to the bottom of this file to add new code into your theme.

  2. Add the code below, replacing highlighted elements of the code with actual data.
    Font name > the name of the font, if the font has more than one word in it's name it will need "quotation marks" - these will also be needed when inserting into Shogun.
    Filename > the name of the file that was just uploaded to your theme including the file extension, for example, cosmic_sans_bold.ttf.
    Format > the format of the font that was uploaded, for example, for Athena.ttf this would be "TrueType".

@font-face {
font-family: "Font name";
src: url({{ "Filename" | asset_url }}) format("Format");
}

Hope this can help you solve the issue

Thank you

Viktor | PageFly

MRamzan
Shopify Partner
165 1 21

You can add custom font to any theme.

Added font will reflect in your setting where you can choose.

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112