Adding custom font

Adding custom font

dekiv
Shopify Partner
163 2 13

Hi, I'm new to this and have no idea how to add custom fonts in from a designer to my store. Any help would be really appreciated. The file is an (.otf) file

Replies 9 (9)

rajweb
Shopify Partner
238 17 17

Hey @dekiv ,

To add a custom font (.otf) to your Shopify store

Follow these steps:

1.  Online Store > Themes.

2. Edit Code.

3. In the sidebar, locate the Asset folder and click on Add a new asset.

4. Upload your .otf font file there.

 

Modify the CSS File:

1. Once the font is uploaded, locate the theme.css or theme.scss.liquid file under Assets.

2. Add the following code to reference the custom font:

 

 

@font-face {
    font-family: 'CustomFont';
    src: url('{{ "your-font-file.otf" | asset_url }}') format('opentype');
    font-weight: normal;
    font-style: normal;
}

 

 

Replace  "your-font-file.otf" with the actual filename of your font.

 

Apply the Custom Font:

Now that the font is uploaded and referenced, you can apply it to specific elements. For example, if you want all the headings (h1, h2, etc.) to use the custom font, add the following CSS:

 

 

h1, h2, h3, h4, h5, h6 {
    font-family: 'CustomFont', sans-serif;
}

 

 

 

Or apply it globally across your site:

 

 

body {
    font-family: 'CustomFont', sans-serif;
}

 

 

Once you've updated the code, click Save and refresh your site to see the changes.

-If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regard,

Rajat Sharma

 

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com
dekiv
Shopify Partner
163 2 13

Thanks for your response!

 

I can't find the theme.css or theme.scss.liquid file under Assets- All i have is base.css on Dawn theme

dekiv_0-1728464986611.png

 

rajweb
Shopify Partner
238 17 17

In the Dawn theme, the main CSS file is  bass.css. You can add your custom font to this file

 

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com
rajweb
Shopify Partner
238 17 17

Let me know if you need more help!

 

 

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com
dekiv
Shopify Partner
163 2 13

Thank you.

 

Have followed your instructions but it does not seem to be working still. Some screenshots below for reference:

 

dekiv_0-1728545073129.png

 

dekiv_1-1728545105724.png

 

rajweb
Shopify Partner
238 17 17

Thanks for sharing the second screenshot! From what I can see, there are a couple of points to address in your code.

@font-face {
    font-family: 'CustomFontName'; /* Replace with the desired name */
    src: url('{{ "MichelePiche Regular.otf" | asset_url }}') format('opentype'); /* Make sure the filename is correct */
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'CustomFontName', sans-serif; /* Apply custom font with fallbacks */
}

/* Optional: Apply to specific elements */
h1, h2, h3 {
    font-family: 'CustomFontName', sans-serif; /* Use the custom font for headings */
}

If  it still doesn’t work, let me know, and we can troubleshoot further!

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com
dekiv
Shopify Partner
163 2 13

Thank you - have pasted the above code but still no luck 😞

 

dekiv_0-1728547998019.png

 

rajweb
Shopify Partner
238 17 17

I understand what you’re saying. Could you please send me a message via email so we can discuss this further?

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com

JonathanSor
Shopify Partner
9 1 1

You can just use my free app "Font Pro" to add custom fonts in a few clicks

Font Pro - best (also free) Shopify app for managing fonts