Shopify themes, liquid, logos, and UX
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
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
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
In the Dawn theme, the main CSS file is bass.css. You can add your custom font to this file
Let me know if you need more help!
Thank you.
Have followed your instructions but it does not seem to be working still. Some screenshots below for reference:
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!
Thank you - have pasted the above code but still no luck 😞
I understand what you’re saying. Could you please send me a message via email so we can discuss this further?
You can just use my free app "Font Pro" to add custom fonts in a few clicks
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024