Font now showing correct

Store Design
,
1

I am using this code

@font-face {
font-family: “Itim-Regular”;
src: url(“Itim-Regular.woff2”) format(“woff2”),
url(“Itim-Regular.woff”) format(“woff”);
}

h1,h2,h3,h4,h5,h6,body,a, { font-family: “Itim-Regular”!important; }

I want the Itim font to work on my theme. But it is not working.

I also have uploaded it as woff file.also tried woff2. Didnt work.

website: https://dhk1zg-x0.myshopify.com/

2

Correct the @font-face Declaration Update your CSS to correctly reference the font files. Shopify uses the assets folder, so your URL should look like this:

@font-face { font-family: "Itim-Regular"; src: url('{{ "Itim-Regular.woff2" | asset_url }}') format("woff2"), url('{{ "Itim-Regular.woff" | asset_url }}') format("woff"); }

Apply the Font Correctly Your CSS selector has a syntax issue due to an extra comma after a. Remove it and ensure all text elements are covered. Here’s the corrected CSS:

h1, h2, h3, h4, h5, h6, body, a { font-family: "Itim-Regular" !important; }
3

It changed font and I can see it has changed but this is not itim haha.

this is the one I want https://fonts.google.com/?query=itim

but is another on the website. even tho a chrome extension tool tells me the website text is itim. It is not the one

https://dhk1zg-x0.myshopify.com/

4

It seems like the font you added is not the same as the Google Fonts version of Itim, and that’s causing the mismatch. Here’s how you can fix this:

Use Google Fonts for Itim

Instead of manually uploading the font file, you can link the font directly from Google Fonts, ensuring it matches the desired version.

Go to the Google Fonts Itim page.

Click Select this style and copy the tag for the font.

Example:

Paste the tag into the section of your theme. In Shopify:

Go to Online Store > Themes > Actions > Edit code.

Open layout/theme.liquid.

Add the tag just before the closing tag.

Update Your CSS

Now update your CSS to use the Itim font from Google Fonts:

h1, h2, h3, h4, h5, h6, body, a {
  font-family: "Itim", cursive !important;

}

Remove Conflicting Fonts

If you’ve previously added a custom @font-face declaration or uploaded font files, remove them from your CSS and the assets folder to prevent conflicts.

5

Thank you. Seem like it worked.

But it is not showing in the announcement bar. Do you know why?

6

Hi!

I have the same issue and I’ve tried both solutions: linking the Google font and adding the file and CSS code, but none of them worked.

This is what I’ve inserted:

@font-face {
font-family: “KdamThmorPro-Regular”;
src: url(‘{{ “KdamThmorPro-Regular.woff2” | asset_url }}’) format(“woff2”), url(‘{{ “KdamThmorPro-Regular.woff” | asset_url }}’) format(“woff”);
}

h1, h2, h3, h4,h5 ,h6 {
font-family: “KdamThmorPro-Regular”!important;
}

But I see another font, not the correct one.

Instead, by linking it, a warning message appears to suggests to upload the file and not to link it.

Here attached the screenshot.