How can I ensure all site elements use my custom font?

Store Design
, , ,
1

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.png
1.png1119×415 33.9 KB

2.png
2.png1297×227 5.04 KB

3.png
3.png458×449 21.3 KB

2

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.

3

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