Jump to content

Custom Fonts help

Recommended Posts

hi guys,  I've searched this on the forum for a while and have made all the changes and tweaks recommended but am still not getting any results. 

i've uploaded custom fonts to my squarespace (NibPro and ElanITC) but when I visit the website the headers are using times new roman still in places I've asked for our custom fonts to be used - in particular the home page, at various points and with respect to the site header text.

Also, our Contact Us page block is still in the same font. Can anyone help? I've posted the CSS below in case I've done something really wrong...

thanks! 

--

//Edit header fonts//
@font-face {
  font-family: 'ElanITC';
       src: url ('https://static1.squarespace.com/static/628f8fb45c6de7605ef05ef0/t/628f93e4f8a4833669bc131a/1653576676746/elanitcstd-medium.otf');
  }
h1 {font-family: 'ElanITC';}
h2 {font-family: 'ElanITC';}
h3 {font-family: 'ElanITC';}
h4 {font-family: 'ElanITC';}

// Site Title //
.header-title-text a {
  font-family: 'NibPro-Regular' !important;
}

// Site Navigation //
.header-nav-item a {
  font-family: 'ElanITC' !important;
}

// Button //
.header-actions-action .btn {
  font-family: 'ElanITC' !important;
}

// Announcement Bar //
.sqs-announcement-bar-url a {
  font-family: 'ElanITC' !important;
}

//Edit paragraph fonts//
@font-face {
  font-family: 'NibPro-Regular';
       src: url('https://static1.squarespace.com/static/628f8fb45c6de7605ef05ef0/t/62912753087c443cb4184675/1653679955085/NibPro-Regular.ttf');
  }
.sqsrte-large {font-family: 'NibPro-Regular';}
p {font-family: 'NibPro-Regular';}
.sqsrte-small {font-family: 'NibPro-Regular';}

.newsletter-block .newsletter-form-field-element::placeholder {
    font-family: NibPro-Regular;
}

// Small or Tertiary Button //
.sqs-block-button-element--small,  .sqs-button-element--tertiary {
  font-family: NibPro-Regular !important;
}

// Medium or Primary Button //
.sqs-block-button-element--medium, .sqs-button-element--primary {
  font-family: NibPro-Regular !important;
}

// Large or Secondary Button //
.sqs-block-button-element--large, .sqs-button-element--secondary {
  font-family: NibPro-Regular !important;
}

.form-wrapper .field-list .title {
  font-family: 'ElanITC';
  color: #FFFFFF;
}

.form-wrapper .field-list .field .caption {
  font-family: ElanITC;
  font-size: 9px;
  color: #FFFFFF;
}

/* blog title font */
h1.blog-title, h1.entry-title, a.summary-title-link {
    font-family: 'ElanITC' !important;
}

body.view-list .blog-date {
        font-family: NibPro-Regular;
          font-size: 15px
}

//google recaptcha styling
.captcha-container {
opacity: .3;
transition: opacity .3s ease;
}
.newsletter-form-body:focus-within .captcha-container, .form-wrapper:focus-within .captcha-container, .captcha-container:hover {
opacity: 1;
}

Link to comment
  • Replies 7
  • Views 564
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

i think i solved it: the reference name in the code of the font for Elan was not the same as that uploaded onto the CSS custom font ('elanitcstd-medium').

EDIT: I didn't solve it it seems; I checked another desktop using safari and it still isn't showing. I'm lost!

@tuanphan any ideas on this one as you seem to be a master of solving these custom font issues! FYI - someone mentioned above using a WOFF/WOFF2 format. would this help? I have my elan in OTF format. nibpro is in ttf and this is working fine. 

also, it seems to be working now on my desktop, but on my mobile device it does not show properly! any ideas what the reason is for this? here's the updated code if anyone can help! thank you!

//Edit header fonts//
@font-face {
  font-family: 'elanitcstd-medium';
       src: url ('https://static1.squarespace.com/static/628f8fb45c6de7605ef05ef0/t/628f93e4f8a4833669bc131a/1653576676746/elanitcstd-medium.otf');
  }
h1 {font-family: 'elanitcstd-medium';}
h2 {font-family: 'elanitcstd-medium';}
h3 {font-family: 'elanitcstd-medium';}
h4 {font-family: 'elanitcstd-medium';}

// Site Title //
.header-title-text a {
  font-family: 'NibPro-Regular' !important;
}

// Site Navigation //
.header-nav-item a {
  font-family: 'elanitcstd-medium' !important;
}

// Button //
.header-actions-action .btn {
  font-family: 'elanitcstd-medium' !important;
}

// Announcement Bar //
.sqs-announcement-bar-url a {
  font-family: 'elanitcstd-medium' !important;
}

//Edit paragraph fonts//
@font-face {
  font-family: 'NibPro-Regular';
       src: url('https://static1.squarespace.com/static/628f8fb45c6de7605ef05ef0/t/62912753087c443cb4184675/1653679955085/NibPro-Regular.ttf');
  }
.sqsrte-large {font-family: 'NibPro-Regular';}
p {font-family: 'NibPro-Regular';}
.sqsrte-small {font-family: 'NibPro-Regular';}

.newsletter-block .newsletter-form-field-element::placeholder {
    font-family: NibPro-Regular;
}

// Small or Tertiary Button //
.sqs-block-button-element--small,  .sqs-button-element--tertiary {
  font-family: NibPro-Regular !important;
}

// Medium or Primary Button //
.sqs-block-button-element--medium, .sqs-button-element--primary {
  font-family: NibPro-Regular !important;
}

// Large or Secondary Button //
.sqs-block-button-element--large, .sqs-button-element--secondary {
  font-family: NibPro-Regular !important;
}

.form-wrapper .field-list .title {
  font-family: 'elanitcstd-medium';
  color: #FFFFFF;
}

.form-wrapper .field-list .field .caption {
  font-family: 'elanitcstd-medium'; 
  font-size: 9px;
  color: #FFFFFF;
}

/* blog title font */
h1.blog-title, h1.entry-title, a.summary-title-link {
    font-family: 'elanitcstd-medium' !important;
}

body.view-list .blog-date {
        font-family: NibPro-Regular;
          font-size: 15px
}

//google recaptcha styling
.captcha-container {
opacity: .3;
transition: opacity .3s ease;
}
.newsletter-form-body:focus-within .captcha-container, .form-wrapper:focus-within .captcha-container, .captcha-container:hover {
opacity: 1;
}

 

Edited by chailover
Link to comment

If the url of the uploaded font is correct and the name of the font-family is correct, it should actually work, even without the !important property.

Here, for example, is my custom CSS, which works well:
 

/*** LOCAL FONTS ***/

/* poppins-300 - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: url('https://static1.squarespace.com/static/###/poppins-v20-latin-300.woff2') format('woff2'),
       url('https://static1.squarespace.com/static/###/poppins-v20-latin-300.woff') format('woff'),
       url('https://static1.squarespace.com/static/###/poppins-v20-latin-300.ttf') format('truetype');
}

/* poppins-regular - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('https://static1.squarespace.com/static/###/poppins-v20-latin-regular.woff2') format('woff2'),
       url('https://static1.squarespace.com/static/###/poppins-v20-latin-regular.woff') format('woff'),
       url('https://static1.squarespace.com/static/###/poppins-v20-latin-regular.ttf') format('truetype');
}
/* poppins-500 - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url('https://static1.squarespace.com/static/###/poppins-v20-latin-500.woff2') format('woff2'),
       url('https://static1.squarespace.com/static/###/poppins-v20-latin-500.woff') format('woff'),
       url('https://static1.squarespace.com/static/###/poppins-v20-latin-500.ttf') format('truetype');
}

/* Overwrite the font-family of all relevant elements */

h1, h2, h3, h4 {
	font-family:'Poppins';
	font-weight: 500;
}

p {
	font-family: 'Poppins';
	font-weight: 300;
}

.sqsrte-large {
	font-family: 'Poppins';
	font-weight: 300;
}
.sqsrte-small {
	font-family: 'Poppins';
	font-weight: 300;
}

.header-nav-item a {
	font-family: 'Poppins';
	font-weight: 400;
	text-transform: uppercase;
}
/* Mobile navigation */  
.header-menu-nav-item a { 
	font-family: 'Poppins';  
}

/* Website title */
.header-title-text a { 
	font-family: 'Poppins';  
}

/* Blog title */  
h1.blog-title {
	font-family: 'Poppins'; 
}

 

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.