Why is my custom font not working properly on my theme?

Store Design
, ,
1

Hi All! I’m having some major issues getting my custom font to take with a store I’m building. I’ve added custom font to a bunch of Shopify stores in the past, and haven’t had this issue before.

I’ve added both of my fonts to my assets as woff2 files. I’ve tried woff and otf just to see if that might have been the issues. I also added the following code to my base.css file, I tried it in the theme.liquid file as well with the same result.

@font-face {
	font-family: "La Luxes Serif";
	src: url("LaLuxesSerif.woff2") format("woff2"),
	url("LaLuxesSerif.woff2") format("woff2");
}

@font-face {
	font-family: "La Luxes Script";
	src: url("LaLuxesScript.woff2") format("woff2"),
	url("LaLuxesScript.woff2") format("woff2");

If you inspect my home page it does say it’s using the La Luxes Serif font family, but you can clearly see that the font is not taking correctly:

https://behind-the-boxwood.myshopify.com/

Password: yicowr

h2 {
  font-family: "La Luxes Serif";
}
h4 {
  font-family: "La Luxes Serif";
}
p {
  font-family: "La Luxes Serif";
}

fantasiummedia_0-1712334423507.png
fantasiummedia_0-1712334423507.png1236×280 26.1 KB

Is it possible there is some issue with the specific font I’ve chosen? Any help is greatly appreciated, I’ve been struggling with this for a while.

2

Figured this out, the guide on the Shopify site is not very clear at all. Was able to fix it by uploading my fonts to the files instead of assets (which I had already done) then using the link from the files page instead of their link generator.

@font-face {
	font-family: "La Luxes Serif";
	src: url('https://cdn.shopify.com/s/files/1/0644/7507/0655/files/La_Luxes_Serif.woff2?v=1712332354') format("woff2"),
	url('https://cdn.shopify.com/s/files/1/0644/7507/0655/files/La_Luxes_Serif.woff2?v=1712332354') format("woff2");
1 Like