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

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

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

For example

Thank you! I'm still having the issue. Sometimes it loads, sometimes it doesn't. 😩