Solved

Not all elements on the site follow it

kmeln90
Visitor
2 1 0

Congratulations. I customized my own font in the theme using(by uploading a font file to the site):

@font-face {
font-family: "GilroySB";
src: url("https://cdn.shopify.com/s/files/1/0581/9469/0179/files/GilroySB.woff2?v=1708110873") format("woff2"),
url("https://cdn.shopify.com/s/files/1/0581/9469/0179/files/GilroySB.woff?v=1708130944") format("woff");
}

body {
font-family: "GilroySB";
}

Where GilroySB is the name of the font. But not all elements on the site follow it (as in the images). I tried to customize each element separately, but it doesn't work. Can you tell me how to solve the problem? Elements are displayed in the base font - Assistant

1.png2.png3.png

Accepted Solution (1)
kmeln90
Visitor
2 1 0

This is an accepted solution.

I solved the problem by changing the font-family: "GilroySB" in the h5 element in the base.css file; instead of the standard line.

View solution in original post

Replies 2 (2)

tim
Shopify Expert
3333 258 1243

When you assign font-family on the body element it will be inherited by all its children unless there is another rule which specifically applies to these elements.

 

It's hard to be precise without seeing your site, but you should try higher specificity selectors, like 

body * {
  font-family: "GilroySB";
}

or even 

body * {
  font-family: "GilroySB" !important;
}

which should cover most of cases.

 

Note that some apps may still add elements which would not follow the rule.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
kmeln90
Visitor
2 1 0

This is an accepted solution.

I solved the problem by changing the font-family: "GilroySB" in the h5 element in the base.css file; instead of the standard line.