Jump to content

Help change font on blog metadata, cookie banner and more

Go to solution Solved by Lesum,

Recommended Posts

Posted

Hello! I cannot figure out how to change to a custom font show up for:

  1. blog categories
  2. form fields
  3. buttons
  4. The cookie banner.  

I would appreciate any help immensely! website: www.brosy.studio

  • I've tried: .summary-metadata { font-family: 'AlteHaasGroteskRegular' !important;}
  • and: .blog-basic-grid .blog-meta-section * { font-family: 'AlteHaasGroteskRegular' !important;}

and I think everything else that @tuanphan and @Ziggy have recommended and nothing has worked so far. 

Here's my code currently:

//FONT UPLOAD

@font-face {

  font-family: 'AlteHaasGroteskRegular';

  src: url('https://static1.squarespace.com/static/65de5e2f2da9c5668dd090df/t/6639077acd827a6b6d01511e/1715013498356/AlteHaasGroteskRegular.ttf');

  format: 'format('opentype')';

}

 

@font-face {

  font-family: 'AzeretMono-Light';

  src: url('https://static1.squarespace.com/static/65de5e2f2da9c5668dd090df/t/663908a07df55146ca74f54d/1715013792274/AzeretMono-Light.ttf');

  format: 'format('opentype')';

}

 

//BODY FONT TWEAKS

p {font-family: AzeretMono-Light;}

p1 {font-family: AzeretMono-Light;}

p2 {font-family: AzeretMono-Light;}

p3 {font-family: AzeretMono-Light;}

p4 {font-family: AzeretMono-Light;}

 

//HEADING FONT TWEAKS

h1 {font-family: AlteHaasGroteskRegular;}

h2 {font-family:AlteHaasGroteskRegular;}

h3 {font-family:AlteHaasGroteskRegular;}

h4 {font-family:AlteHaasGroteskRegular;}

 

// MISC FONT TWEAKS 

a {

  font-family: 'AzeretMono-Light', Arial, sans-serif; 

}

button { font-family: 'AzeretMono-Light', Arial, sans-serif; 

}

 

//BLOG TWEAK

h1.blog-title a, h1.entry-title, a.summary-title-link {

  font-family: 'AlteHaasGroteskRegular' !important;

}

  • Solution
Posted (edited)

@brosyhale Hi! You can try adding the following code to update the font for: Blog categories, form fields, buttons and cookie banner.

/* Blog categories */
.blog-item-category-wrapper a {
    font-family: 'AzeretMono-Light' !important;
}

/* Buttons */
#siteWrapper.site-wrapper .sqs-button-element--primary, #siteWrapper.site-wrapper .sqs-button-element--secondary, #siteWrapper.site-wrapper .sqs-button-element--tertiary {
    font-family: 'AzeretMono-Light' !important;
}

/* Cookie banner */
.gdpr-cookie-banner * {
    font-family: 'AlteHaasGroteskRegular' !important;
}

/* Form */
.sqs-block-form .field-list .title {
    font-family: 'AlteHaasGroteskRegular' !important;
}

.sqs-block-form .field-list .caption-text {
    font-family: 'AlteHaasGroteskRegular' !important;
}

.sqs-block-form .field-list .description {
    font-family: 'AlteHaasGroteskRegular' !important;
}

.sqs-block-form .field-list input, .sqs-block-form .field-list input::placeholder, .sqs-block-form .field-list textarea, .sqs-block-form .field-list textarea::placeholder, .sqs-block-form .form-item select, .sqs-block-form .form-item select option, .sqs-block-form .field-list .option {
    font-family: 'AlteHaasGroteskRegular' !important;
}

 

Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.