Adding custom font

[dekiv]

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

[rajweb]

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

[dekiv]

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

[rajweb]

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

[rajweb]

Let me know if you need more help!

[dekiv]

Thank you.

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

[rajweb]

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!

[dekiv]

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

[rajweb]

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

[JonathanSor]

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

[gr_trading]

Hi @dekiv ,

You have to convert your OTF font to WOFF to add in your store.

Please refer the below video to implement the same.