My custom fonts are not showing up on mobile.

Site URL: http://dram.app

Hi,

I'm using some custom typefaces in a couple of forms.
My site is based off the Passero template.
http://dram.app
The password is iloveBeer22!

The preview of mobile on web browser shows the fonts as they should be
however when I check on my mobile device are not correct as seen in the image below:


They should look like this:



Any ideas?

This is the CSS i'm currently using:

.form-wrapper {

background:#efefef; 

padding:25px; 

border-style:solid; 

border-width:1px; 

border-color:#9b9b9b;

}

 

.form-wrapper .field-list .title {

color: #0f1c0b; 

font-family: karla-bold !important; 

text-align: left; 

text-transform: sentencecase; 

font-weight: 200; 

font-size: 16pt; 

letter-spacing: .02em !important; 

} 

 

.form-wrapper .field-list .field .field-element { 

border-style:solid;  

border-width:1px;  

border-color:#9b9b9b; 

border-radius: 0px; 

background: #ffffff; 

}

 

.form-wrapper .field-list .field .caption {

color: #9b9b9b; 

font-family: karla-light; 

text-align: left; 

text-transform: uppercase; 

font-weight: 300; 

font-size: 10pt; 

letter-spacing: .0.5em !important; 

}


THANKING YOU!!!!

Hi. karla-light is custom font or Squarespace font?

custom font

Hi!

Any ideas on this one?

On 4/22/2021 at 4:35 AM, Oliver_H said:

custom font

Have you declared font-face for custom font yet?

@font-face {
	font-family: karla-light;
	src: url(upload font and paste font file url here);
}
.form-block * {
	font-family: karla-light !important;
}