Expanase theme: How to add custom font for my store?

Store Design
1

Hi there,

I need the help. How to custom my store font from Nunito to Lufga?

I have tried to put this code under theme.css.liquid, but failed, it doesn’t show the Lufga font as expected.

@font-face {
font-family: “LufgaRegular”;
src: url({{ “LufgaRegular” | asset_url }}) format(“Format”);
}

h1,h2,h3,p,a,ul { font-family: “LufgaRegular”!important; }

Was I doing something wrong?

My page url: https://xhzlzfocrm5zcik0-61102129332.shopifypreview.com/products_preview?preview_key=e5253ad06e140cdbda7f1eceb3681af8

Password: rewfle

1 Like
2

Its wrong approach.
As I can see in theme.css , There are CSS variables.
So you have to update CSS variables file as well.
Also the way of include fonts are wrong. You have to upload eot, woff, ttf formats in assets folder and then have to include code like this :

@font-face {
font-family: ‘Acumin Pro’;
src: url(‘AcuminPro-Thin.eot’);
src: url(‘AcuminPro-Thin.eot?#iefix’) format(‘embedded-opentype’),
url(‘AcuminPro-Thin.woff2’) format(‘woff2’),
url(‘AcuminPro-Thin.woff’) format(‘woff’),
url(‘AcuminPro-Thin.ttf’) format(‘truetype’),
url(‘AcuminPro-Thin.svg#AcuminPro-Thin’) format(‘svg’);
font-weight: 100;
font-style: normal;
font-display: swap;
}

then you have to update css-variables.liquid
–typeHeaderPrimary: ‘Acumin Pro’;

3

@topestshop

welcome to Shopify Community,
Check out this link you will get resolve your issues,
https://ecomexperts.io/blogs/liquid-tutorial-shopify/shopify-font

Thank you

1 Like
4

I just did as told, but failed to change the font. Maybe there is some different in the theme settings

5

@topestshop
if you are still facing issues, then hire a developer to fix out your issues,
Thank you.

6

Yes for change theme settings, You have to add schema and have to update CSS-Variables file under snippet.

7

I added and changed the code as you suggested, but failed again…It doesn’t work on my site