Jump to content

My custom fonts are not showing up on mobile.

Recommended Posts

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:
image.thumb.png.70168c0ee22b843666f0dd01aede5674.png

They should look like this:

image.png.e9bfa6af3dedf82fa41cb9fe2e5c85ee.png

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!!!!

image.png

image.png

Link to comment
  • Replies 4
  • Views 1.1k
  • Created
  • Last Reply
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.