Custom font not working

11 hours ago, forgottenroar said:

paragraphs

In the CSS you are using P1, P2 and P3 for the paragraphs but these are not the correct selectors, use these instead:

// Paragraph 1
.sqsrte-large {
   font-family: 'font name here';
}

// Paragraph 2
p {
   font-family: 'font name here';
}

// Paragraph 3
.sqsrte-small {
   font-family: 'font name here';
}

https://squarefortytwo.com/squarespace-guides/custom-fonts-on-squarespace-71

@Ziggy OMG. You are a godsend. THANK YOU!!

hi there,

my custom fonts aren't working either. it initially showed the new font styles when I originally input the CSS but once I saved and reloaded, it totally disappeared and I did nothing to the CSS to make that happen. halp!

@font-face {
    font-family: EngelVoelkersHead_Bd;
    src: url(https://static1.squarespace.com/static/5fa30ab99d8ef75fcbf1ce54/t/6660868ae0cf555ec7924420/1717601930226/EngelVoelkersHead_Bd.ttf);
} 

@font-face {
    font-family: EngelVoelkersHead_Rg;
    src: url(https://static1.squarespace.com/static/5fa30ab99d8ef75fcbf1ce54/t/6660868a4fc2fe183893ae65/1717601930226/EngelVoelkersHead_Rg.ttf);
} 

@font-face {
    font-family: EngelVoelkersText_Lt;
    src: url(https://static1.squarespace.com/static/5fa30ab99d8ef75fcbf1ce54/t/66608696f4006d7009cf4254/1717601943017/EngelVoelkersText_Lt.ttf);
} 

@font-face {
    font-family: EngelVoelkersText_Rg;
    src: url(https://static1.squarespace.com/static/5fa30ab99d8ef75fcbf1ce54/t/6660869651f39d714e53669d/1717601943014/EngelVoelkersText_Rg.ttf);
} 

@font-face {
    font-family: EngelVoelkersText_Bd;
    src: url(https://static1.squarespace.com/static/5fa30ab99d8ef75fcbf1ce54/t/666086967e5e551285b7ecd0/1717601942985/EngelVoelkersText_Bd.ttf);
} 

h1 {font-family:'EngelVoelkersHead_Rg'}

h2{
  font-family:'EngelVoelkersHead_Rg';!important
}

h3 {
  font-family:'EngelVoelkersHead_Rg';!important
}
h4{
  font-family:'EngelVoelkersHead_Rg';!important
}

.sqsrte-large{font-family:'EngelVoelkersText_Rg';!important}

p[font-family:'EngelVoelkersText_Lt';!important]

.sqsrte-small{font-family:'EngelVoelkersText_Lt';!important}

any and all help is so so so so appreciated!

Hi! 

I've scrolled through the whole thread but still cannot figure out what im doing wrong on my CSS. I'm on the 7.1 version on Squarespace so don't know if it's an issue, my custom font isn't being picked up, or when I head into edit mode, sometimes it'll be picked up and sometimes not? 

here's the CSS code:

 

//vertical line
.vertical-line {
  height: 500px; /* line height */
  width: 1px; /* line width */
  background: #38383B; /*line colour*/
  margin-right: auto;
  margin-left: auto;
}

/* Scrolling text color */
div.marquee-block * {
    color: White !important;
}

//footer social icon hover
.sqs-svg-icon--list {
  a:hover .sqs-use--icon {
        fill: #FF8E29 !important;
}

@font-face {
  
    font-family: 'DrukWideBold';
  
src: url(https://static1.squarespace.com/static/5ff779d442d4d22d66f145d5/t/6661a07b4c509e0648b623e6/1717674107348/DrukWideBold.otf);
}
  
h1, h2, h3, h4, h5 {
  font-family:'DrukWideBold' !important;
}
}

On 6/6/2024 at 4:47 AM, gbarsness17 said:

hi there,

my custom fonts aren't working either. it initially showed the new font styles when I originally input the CSS but once I saved and reloaded, it totally disappeared and I did nothing to the CSS to make that happen. halp!

@font-face {
    font-family: EngelVoelkersHead_Bd;
    src: url(https://static1.squarespace.com/static/5fa30ab99d8ef75fcbf1ce54/t/6660868ae0cf555ec7924420/1717601930226/EngelVoelkersHead_Bd.ttf);
} 

@font-face {
    font-family: EngelVoelkersHead_Rg;
    src: url(https://static1.squarespace.com/static/5fa30ab99d8ef75fcbf1ce54/t/6660868a4fc2fe183893ae65/1717601930226/EngelVoelkersHead_Rg.ttf);
} 

@font-face {
    font-family: EngelVoelkersText_Lt;
    src: url(https://static1.squarespace.com/static/5fa30ab99d8ef75fcbf1ce54/t/66608696f4006d7009cf4254/1717601943017/EngelVoelkersText_Lt.ttf);
} 

@font-face {
    font-family: EngelVoelkersText_Rg;
    src: url(https://static1.squarespace.com/static/5fa30ab99d8ef75fcbf1ce54/t/6660869651f39d714e53669d/1717601943014/EngelVoelkersText_Rg.ttf);
} 

@font-face {
    font-family: EngelVoelkersText_Bd;
    src: url(https://static1.squarespace.com/static/5fa30ab99d8ef75fcbf1ce54/t/666086967e5e551285b7ecd0/1717601942985/EngelVoelkersText_Bd.ttf);
} 

h1 {font-family:'EngelVoelkersHead_Rg'}

h2{
  font-family:'EngelVoelkersHead_Rg';!important
}

h3 {
  font-family:'EngelVoelkersHead_Rg';!important
}
h4{
  font-family:'EngelVoelkersHead_Rg';!important
}

.sqsrte-large{font-family:'EngelVoelkersText_Rg';!important}

p[font-family:'EngelVoelkersText_Lt';!important]

.sqsrte-small{font-family:'EngelVoelkersText_Lt';!important}

 

any and all help is so so so so appreciated!

remove this line from CSS code

[ and ] is invalid symbol, it will make all code syntax error

On 6/6/2024 at 7:04 PM, PRASHLDN said:

Hi! 

 

I've scrolled through the whole thread but still cannot figure out what im doing wrong on my CSS. I'm on the 7.1 version on Squarespace so don't know if it's an issue, my custom font isn't being picked up, or when I head into edit mode, sometimes it'll be picked up and sometimes not? 

here's the CSS code:

 

//vertical line
.vertical-line {
  height: 500px; /* line height */
  width: 1px; /* line width */
  background: #38383B; /*line colour*/
  margin-right: auto;
  margin-left: auto;
}

/* Scrolling text color */
div.marquee-block * {
    color: White !important;
}

//footer social icon hover
.sqs-svg-icon--list {
  a:hover .sqs-use--icon {
        fill: #FF8E29 !important;
}

@font-face {
  
    font-family: 'DrukWideBold';
  
src: url(https://static1.squarespace.com/static/5ff779d442d4d22d66f145d5/t/6661a07b4c509e0648b623e6/1717674107348/DrukWideBold.otf);
}
  
h1, h2, h3, h4, h5 {
  font-family:'DrukWideBold' !important;
}
}

Remove this symbol