Problem with custom Font in Safari and Firefox

Hello, i hope somebody ca help me here.  For the website https://www.lenaschreibt.at/ i used 2 different fonts. One is working the other one doesn't. In Google everything is finde. But at Firefox or Safari it looks completly different.

Can anybody help me here?

Greets Tanja

Can you share the code you've used? Where are you trying to apply the font that isn't working?

@font-face {
font-family: Kiro;
src: url(https://static1.squarespace.com/static/653f79fb2fff802e836b313f/t/653f80911012b8031ab64015/1698660498037/Kiro-Light.otf);
}

@font-face {
font-family: Bariol;
src: url(https://static1.squarespace.com/static/65786b36befe0533e8ad1663/t/65786b3cbefe0533e8ad178c/1698660246983/Bariol_Serif_Regular.otf);
}

h1 {
font-family: 'bariol';
}

h2 {
font-family: 'Bariol';
}

h3 {
font-family: 'Bariol';
}

h3 {
font-family: 'Bariol';
}

h4 {
font-family: 'Bariol';
}

.header-menu-nav-item a {
font-family: 'Bariol';
}

.blog-item-title h1.entry-title {
font-family: 'Bariol';
}

.sqsrte-large {font-family: 'Kiro';}

p {font-family: 'Kiro';}

.sqsrte-small {font-family: 'Kiro';}

.header-nav-item a {font-family: 'Kiro' !important;}

.sqs-block-button-element--large, .sqs-button-element--secondary {font-family: 'Kiro' !important;}

.sqs-block-button-element--medium, .sqs-button-element--primary {font-family: 'Kiro' !important;}

.sqs-block-button-element--small,  .sqs-button-element--tertiary {font-family: 'Kiro' !important;}

Hi this is the code. The font isn't working in safari and firefox. In Google it looks good.

Is it Kiro or Bariol that isn't working?

Kiro