Jump to content

I need help with coding a custom font.. I coded it, but it won't load

Recommended Posts

Hi! I upload some font files on my website and injected some code into the custom CSS, but it's not loading.

I can only see the custom code when I'm editing a page and have the custom CSS box open.

I'm trying to use :

  • Manrope-Regular for the paragraphs and navigation links
  • Manrope-Bold for h1, h2, and h3, content buttons, form buttons, form titles, the header button, and form buttons,
  • Parkside-Regular for h4.

I couldn't figure out how to change the fonts for the header button and the blogs.

Here are the codes I have injected:

@font-face {     
  font-family: 'Manrope-Regular';        
  src: url(https://static1.squarespace.com/static/5fadc9a2270b006044c1dba7/t/6407cdf710fd3678b23ddcb4/1678233079794/Manrope-Regular.ttf);   
} 
p     {font-family: 'Manrope-Regular';
text-transform: none;
letter-spacing: .90px;}
.header-nav-item a, .header-menu-nav-item a     {font-family: 'Manrope-Regular';
text-transform: uppercase;
letter-spacing: 1.8px;}
.form-wrapper .field-list .field .caption     {font-family: 'Manrope-Regular' !important;
text-transform: none;
letter-spacing: 1.8px;}


@font-face {     
  font-family: 'Manrope-Bold';        
  src: url(https://static1.squarespace.com/static/5fadc9a2270b006044c1dba7/t/6407ce0010fd3678b23ddcfd/1678233088402/Manrope-Bold.ttf);   
} 
h1     {font-family: 'Manrope-Bold';
text-transform: Uppercase;
letter-spacing: 2.4px;}
h2     {font-family: 'Manrope-Bold';
text-transform: Uppercase;
letter-spacing: 2.4px;}
h3     {font-family: 'Manrope-Bold';
text-transform: Uppercase;
letter-spacing: 2.4px;}
a.btn.btn--border.theme-btn--primary-inverse {font-family: 'Manrope-Bold';
text-transform: Uppercase;
letter-spacing: 2.4px;}
button {font-family: 'Manrope-Bold';
text-transform: Uppercase;
letter-spacing: 2.4px;}
.form-wrapper .field-list .title {font-family: 'Manrope-Bold';
text-transform: Uppercase;
letter-spacing: 2.4px;}



@font-face {     
  font-family: 'Parkside-Regular';        
  src: url(https://static1.squarespace.com/static/5fadc9a2270b006044c1dba7/t/6407ced4a475ea7efe782f49/1678233300352/parkside-regular.otf);   
} 
h4     {font-family: 'Parkside-Regular';
text-transform: none;
letter-spacing: 0px;}

Website:

https://www.jimssupply.com
PurpleGrapes1959

 

Link to comment
  • Replies 3
  • Views 365
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

6 hours ago, noodles22 said:

Hi! I upload some font files on my website and injected some code into the custom CSS, but it's not loading.

I can only see the custom code when I'm editing a page and have the custom CSS box open.

I'm trying to use :

  • Manrope-Regular for the paragraphs and navigation links
  • Manrope-Bold for h1, h2, and h3, content buttons, form buttons, form titles, the header button, and form buttons,
  • Parkside-Regular for h4.

I couldn't figure out how to change the fonts for the header button and the blogs.

Here are the codes I have injected:

@font-face {     
  font-family: 'Manrope-Regular';        
  src: url(https://static1.squarespace.com/static/5fadc9a2270b006044c1dba7/t/6407cdf710fd3678b23ddcb4/1678233079794/Manrope-Regular.ttf);   
} 
p     {font-family: 'Manrope-Regular';
text-transform: none;
letter-spacing: .90px;}
.header-nav-item a, .header-menu-nav-item a     {font-family: 'Manrope-Regular';
text-transform: uppercase;
letter-spacing: 1.8px;}
.form-wrapper .field-list .field .caption     {font-family: 'Manrope-Regular' !important;
text-transform: none;
letter-spacing: 1.8px;}


@font-face {     
  font-family: 'Manrope-Bold';        
  src: url(https://static1.squarespace.com/static/5fadc9a2270b006044c1dba7/t/6407ce0010fd3678b23ddcfd/1678233088402/Manrope-Bold.ttf);   
} 
h1     {font-family: 'Manrope-Bold';
text-transform: Uppercase;
letter-spacing: 2.4px;}
h2     {font-family: 'Manrope-Bold';
text-transform: Uppercase;
letter-spacing: 2.4px;}
h3     {font-family: 'Manrope-Bold';
text-transform: Uppercase;
letter-spacing: 2.4px;}
a.btn.btn--border.theme-btn--primary-inverse {font-family: 'Manrope-Bold';
text-transform: Uppercase;
letter-spacing: 2.4px;}
button {font-family: 'Manrope-Bold';
text-transform: Uppercase;
letter-spacing: 2.4px;}
.form-wrapper .field-list .title {font-family: 'Manrope-Bold';
text-transform: Uppercase;
letter-spacing: 2.4px;}



@font-face {     
  font-family: 'Parkside-Regular';        
  src: url(https://static1.squarespace.com/static/5fadc9a2270b006044c1dba7/t/6407ced4a475ea7efe782f49/1678233300352/parkside-regular.otf);   
} 
h4     {font-family: 'Parkside-Regular';
text-transform: none;
letter-spacing: 0px;}

Website:

https://www.jimssupply.com
PurpleGrapes1959

 

You can try adding !important to the code you are using to set font

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

For example

image.png.e3877af9ef6408429084cb5794deb8cc.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • 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.