Jump to content

Custom CSS Fonts Broken in Image Sections and Blog

Recommended Posts

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

Hello!

I'm doing some small updates to my site design and the css I was using before is no longer working for certain sections of my site (specifically the new image sections and also the blog). I'm including all of the font-related CSS I've entered below, and two screenshots to show how the font is misbehaving. Thank you so much in advance! 

 

//////// FONTS /////////
@font-face {

    font-family: 'NeueWorldExt';
       src: url('https://static1.squarespace.com/static/5fe9df8075c773734d26c565/t/5ff9cb6fd756af1ec07a39ad/1610206063505/NeueWorld-ExtendedMedium.otf');
  }

@font-face {

    font-family: 'NeueWorldCond';
       src: url(https://static1.squarespace.com/static/5fe9df8075c773734d26c565/t/600c715ad10b572a0fa30856/1611428187098/NeueWorld-SemiCondensedLight.otf);
  }

@font-face {

    font-family: 'Neue World';
       src: url('https://static1.squarespace.com/static/6178146fb75fe86206d32349/t/61782172baef1a32ebdc1d4f/1635262834437/NeueWorld-Regular.ttf');
  }

h1 {font-family: 'Neue World';}
h2 {font-family: 'Neue World';}
h3 {font-family: 'Neue World';}

@font-face {

    font-family: 'PangramBold';
src: url('https://static1.squarespace.com/static/5fe9df8075c773734d26c565/t/5ffdf37bb813013392a6f2cc/1610478459391/Pangram-Bold.otf'); 
}
      
h4 {font-family: 'PangramBold';}

.image-title-wrapper * {
    font-family: 'PangramBold' !important;
}

@font-face {    
font-family: 'PangramReg';       
src: url('https://static1.squarespace.com/static/5fe9df8075c773734d26c565/t/5ffdef0953a4df6da2ffcec6/1610477321926/Pangram-Regular.otf');  }

.blog-item-title h1 {
  font-family: 'PangramReg'!important;}
.blog-item-title h2 {
  font-family: 'PangramReg'!important;}
.blog-item-title h3 {
  font-family: 'PangramReg'!important;}

@font-face {

    font-family: 'Roboto';

       src: url('https://static1.squarespace.com/static/5fe9df8075c773734d26c565/t/61795a85a7852e75ab4af471/1635342982261/Roboto-Regular.ttf');
}

P1 {font-family: 'Roboto';}
P2 {font-family: 'Roboto';}
P3 {font-family: 'Roboto';}
Body {font-family: 'Roboto';}


/* Custom Font - Site Title */
.site-title span {
   font-family: 'Roboto' !important;
}

.Header-nav-inner {             
   font-family: 'Roboto';
}

span.unauth {
    font-family: 'Roboto';
}

nav.Header-nav.Header-nav--secondary .Header-nav-item {
   font-family: 'Roboto' !important;
}

span.unauth {
    font-family: 'Roboto' !important;
}

/* Account custom font */
span.auth {
    font-family: 'Roboto' !important;
}

.header-nav *, nav.header-menu-nav-list * {
    font-family: 'Roboto' ;
}

a.btn.btn--border.theme-btn--primary-inverse {
    font-family: 'Roboto';
}

.sqs-block-button a, [class*='button'], [class*='btn'] {
    font-family: 'Roboto' !important;
}

/* Variant */
.variant-select-wrapper * {
    font-family: 'Roboto' !important;
}
.variant-select-wrapper:before {
    font-family: 'Roboto' !important;
}
span.unauth {
    font-family: 'Roboto' !important;
}

////// BLOG CSS ////////
h1.blog-title a {
    font-family: 'PangramReg' !important;
}

b.blog-excerpt a {
font-family: 'Roboto' !important;
}

time.summary-metadata-item.summary-metadata-item--date {
    font-family: 'Roboto' !important;
}
a.summary-title-link {
    font-family: 'Roboto' !important;
}
a.summary-read-more-link {
    font-family: 'Roboto' !important;
}

.summary-metadata * {
    font-family: 'Roboto' !important;
}

.blog-item-title h1.entry-title {
    font-family: 'PangramReg' !important;
}

section.item-pagination.item-pagination--prev-next {font-family: 'PangramReg' !important;

}

/* read more font */
a.blog-more-link {
    font-family: 'Roboto' !important;
}


  

Screen Shot 2021-11-12 at 6.08.24 PM.png

Screen Shot 2021-11-12 at 6.08.05 PM.png

Link to comment
  • Replies 1
  • Views 401
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

I don't see anything wrong with your CSS, but the difficult part is that we don't really have a comparison to see what it is supposed to look like either.

Usually if there's a problem with fonts applying incorrectly, it's because you haven't been specific enough in your CSS to target which elements should receive the new font.

Is it safe to assume that none of the descriptions and titles are inheriting the font that you installed? Could you provide the link to location where the screenshots were taken? Let's start on a single page where only some parts are inheriting the custom font. Because the font, aside from some of the headers, appears to be very similar in style to defaults ones it'll help to isolate the troubleshooting to an individual page.

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.