Custom CSS font to entire site

Site URL: https://www.kakeandkash.com/

Hi,

Need help applying custom css font across my entire site. Ive added the below css based on direction I found from other forum post but still have certain pages using different fonts. I'm not sure what I'm doing wrong. But is there a simpler way to add the uploaded fonts to my entire site across web and mobile? 

@font-face {
  font-family: TSTAR-PRO-Headline;
  src: url(https://static1.squarespace.com/static/5fa3249224b641579547ff1a/t/616250d62bdbd16f2f31a43d/1633833174078/TSTAR-PRO-Headline.otf);
}
// Custom Font //

@font-face {
  font-family: TSTAR-PRO-Bold-2;
  src: url(https://static1.squarespace.com/static/5fa3249224b641579547ff1a/t/616251665746ed57606afa17/1633833318789/TSTAR-PRO-Bold+2.otf);
}
// Custom Font //

@font-face {
  font-family: TSTAR-PRO-Medium;
  src: url(https://static1.squarespace.com/static/5fa3249224b641579547ff1a/t/62c1d3cc6bd1bb4a06c540e6/1656869836261/TSTAR-PRO-Medium.otf);
}
// Custom Font //

@font-face {
  font-family: TSTAR-PRO-Regular;
  src: url(https://static1.squarespace.com/static/5fa3249224b641579547ff1a/t/62c1d3e73c0ea87b40e75404/1656869863830/TSTAR-PRO-Regular.otf);
}
// Custom Font //

@font-face {
  font-family: TSTAR-PRO-Light;
  src: url(https://static1.squarespace.com/static/5fa3249224b641579547ff1a/t/616250f031cd26788069c011/1633833200411/TSTAR-PRO-Light.otf);
}
// Custom Fonts - Headers //

h1 {
  font-family: TSTAR-PRO-Bold-2 !important; 
}
h2 {
  font-family: TSTAR-PRO-Medium !important;
}
h3 {
  font-family: TSTAR-PRO-Regular !important;
}
h4 {
  font-family: TSTAR-PRO-Regular !important;
}
// Custom Fonts - Paragraphs //

p1, p2, p3, p4 {
  font-family: TSTAR-PRO-Light !important;
}

.product-variants * {
    font-family: 'TSTAR-PRO-BOLD-2' !important;
}
//Change Menu Navigation Font
.header-nav-item a {
    font-family: 'TSTAR-PRO-Medium';
}
a.product-title {
    font-family: 'TSTAR-PRO-Regular' !important;
}
.grid-title {
    font-family: 'TSTAR-PRO-Medium' !important;
}
.item-desc a {
    font-family: 'TSTAR-PRO-Regular' !important;
}
/* shop page */
.products.collection-content-wrapper .list-grid * {
    font-family: 'TSTAR-PRO-Regular' !important;
}
/* product block */
.product-block * {
    font-family: 'TSTAR-PRO-Medium' !important;
}
.nested-category-tree-wrapper * {
    font-family: 'TSTAR-Pro-Regular' !important;
}

Thanks for your help in advance!!!!

Hi,

still have certain pages using different fonts

Which page, which elements?

@tuanphan 

Hi! Yes, i've noted the pages below that still have a different font being used.

Product title and price on product list pages

https://www.kakeandkash.com/newarrivals

category navigation on shop pages

https://www.kakeandkash.com/collections/tops

Forms

https://www.kakeandkash.com/contactus

Other pages

https://www.kakeandkash.com/returnexchangepolicy

https://www.kakeandkash.com/aboutus

https://www.kakeandkash.com/faqs

Thank you for your help in advance!!

9 hours ago, urbansoulistic said:

@tuanphan 

Hi! Yes, i've noted the pages below that still have a different font being used.

Product title and price on product list pages

https://www.kakeandkash.com/newarrivals

category navigation on shop pages

https://www.kakeandkash.com/collections/tops

Forms

https://www.kakeandkash.com/contactus

Other pages

https://www.kakeandkash.com/returnexchangepolicy

https://www.kakeandkash.com/aboutus

https://www.kakeandkash.com/faqs

Thank you for your help in advance!!

Class name/ID
+ Product title: .summary-title a
+ Product price: .product-price
+ Category nav: a.nested-category-breadcrumb-link
+ Form: .form-block *