Jump to content

Custom Fonts not available in all browsers / devices

Recommended Posts

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

Hi @tuanphan

I've been having some troubles with the CSS Custom Fonts. I can't see the fonts properly in all browsers / devices. I have noticed that normally H1, H2, H3 are working fine but I can't see the Klavika font on body text or blogs.

Please find in the lines below the CSS inserted:

All fonts have been uploaded as .ttf, .otf, .woff, and .woff2.

h1 {
font-family: 'KLAVIKA BOLD', 'futura-pt', 'sans-serif', !important;
font-size:40px;     
}

h2 {
font-family: 'KLAVIKA MEDIUM', 'futura-pt', 'sans-serif', !important;
font-size: 20px; 
}

h3 {
font-family: 'KLAVIKA MEDIUM', 'futura-pt', 'sans-serif', !important;    
font-size: 15px;  
}

body {
font-family: 'KLAVIKA', 'futura-pt', 'sans-serif';
font-size:20px;     
}

nav a {
font-family: 'KLAVIKA', 'futura-pt', 'sans-serif';
}

.desc-wrapper p > strong {
font-family: 'KLAVIKA MEDIUM', 'futura-pt', 'sans-serif';
}

.BlogList-item-title, {
font-family: 'KLAVIKA', 'futura-pt', 'sans-serif', !important;
font-size: 25px;
}

.BlogItem-title {
font-family: 'KLAVIKA BOLD', 'futura-pt', 'sans-serif', !important;
font-size: 40px;
}

.Header-nav--primary .Header-nav-item {
  font-family: 'KLAVIKA MEDIUM';
}
.Mobile-overlay-nav--primary .Mobile-overlay-nav-item {
  font-family: 'KLAVIKA MEDIUM' !important;
}

.BlogList-item-excerpt {
  font-family: 'KLAVIKA', 'futura-pt', 'sans-serif';
  font-size: 14px;
  color: #616161;
}

.BlogList-item-readmore {
  font-family: 'KLAVIKA', 'futura-pt', 'sans-serif';
  font-size: 14px;
  letter-spacing: 0.19em;
  color: #616161;
}

.sqs-block-summary-v2 .summary-read-more-link {
 font-family: 'KLAVIKA', 'futura-pt', 'sans-serif';
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #616161;
}

Thanks a Million!

Link to comment
  • Replies 2
  • Views 996
  • Created
  • Last Reply

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.