CSS custom font not working in accordion feature on mobile

Hi there, 

My website is working fine and I installed custom fonts. Now on my mobile device in the accordion feature the correct font isn't showing up. Can anyone help? It is the 'basier-square-regular' that isn't working.

Thanks a lot!

 

CSS:

@font-face {
    font-family: 'euclidsquarebold';
    src: url(https://static1.squarespace.com/static/657c42e279893a756cdb4d29/t/657c5b1b04a15523abbdc42d/1702648603469/EuclidSquare-Bold.otf);
} 

@font-face {
    font-family: 'basier-square-regular';
    src: url(https://static1.squarespace.com/static/657c42e279893a756cdb4d29/t/657c5baeb529e32d29f5a9f1/1702648750437/BasierSquareMono-Regular.otf);
}

@font-face {
    font-family: 'basier square Semibold';
    src: url(https://static1.squarespace.com/static/657c42e279893a756cdb4d29/t/65804e774581d60d1b44f2f5/1702907511407/BasierSquareMono-SemiBold.otf);
}

// FONT USE

h1 { 
font-family: 'euclidsquarebold';
font-size:40pt;
letter-spacing: 1px;
line-height: 140%;
}

h2 { 
font-family: 'euclidsquarebold';
font-size: 35pt;
letter-spacing: 0px;
line-height: 140%;
}

h3 { 
font-family: 'euclidsquarebold';
font-size: 29pt;
letter-spacing: 1px;
line-height: 140%;
}

h4 { 
font-family: 'euclidsquarebold';
font-size: 29pt;
letter-spacing: 1px;
line-height: 140%;
}

// Paragraphs

// Paragraph 1
.sqsrte-large {
   font-family: 'basier-square-regular';
  font-weight: 600;

  font-style: regular;

  font-size: 19px;

  letter-spacing: 0.1em;

  text-transform: lowercase;

  line-height: 1em;
}

// Paragraph 2
p {
   font-family: 'basier-square-regular';
    font-weight: 700;

  font-style: regular;

  font-size: 25px;

  letter-spacing: 0.1em;

  text-transform: lowercase;

  line-height: 1em;
}

// Paragraph 3
.sqsrte-small {
   font-family: 'basier-square-regular';
  font-weight: 700;

  font-style: regular;

  font-size: 40px;

  letter-spacing: 0.1em;

  text-transform: lowercase;

  line-height: 1em;
}

Edited December 26, 2023 by BrandBItes

Accordion Title uses Heading 4 (h4)

but I see you use CSS code to set another font for h4

to set 'basier-square-regular' for accordion title, add this CSS code under

div.accordion-block h4 {
	font-family: 'basier-square-regular' !important;
}

 

Thank you so much! Helpful info. I didn't explain it well, but I was actually referring to the font in the description of the accordion. How is that named? Or with which code can I change this one? Thx a lot!

22 hours ago, BrandBItes said:

Thank you so much! Helpful info. I didn't explain it well, but I was actually referring to the font in the description of the accordion. How is that named? Or with which code can I change this one? Thx a lot!

Can you share link to this page?

Sure! https://www.brandbites.be/

Use the code like this

div.accordion-item__description * {
    font-family: 'euclidsquarebold' !important;
}