CSS for installing multiple custom fonts

Hey everyone, 

I am trying to install multiple custom font packs into a website via custom CSS. I am able to do one font for all the headers, but I can't figure out how to add other fonts for the paragraphs. I am a CSS novice! 

Here is what I have for the headers: 

@font-face {

    font-family: 'okemo';

       src: url('https://static1.squarespace.com/static/60e62b67670179472177a892/t/6117cc3c4d93de1bc1c36a0a/1628949564190/okemo.otf');
  
  }

h1 {font-family: 'okemo';}
h2 {font-family: 'okemo';}
h3 {font-family: 'okemo';}
h4 {font-family: 'okemo';}

How/where do I add in paragraph fonts?

For sake of clarity, one of the par fonts I want to add in is "freschezza" / https://static1.squarespace.com/static/60e62b67670179472177a892/t/6117cd3392b8dd44b5ac676b/1628949811699/Freschezza+Normal.otf

Thanks a ton! 

Sure, it's basically the same for multiple fonts. just duplicate the font-face rule and give your other font another name, then assign that to the elements you want. 

e.g.

@font-face {
    font-family: 'okemo';
    src: url('https://static1.squarespace.com/static/60e62b67670179472177a892/t/6117cc3c4d93de1bc1c36a0a/1628949564190/okemo.otf');
}
@font-face {
    font-family: 'freschezza';
    src: url('https://static1.squarespace.com/static/60e62b67670179472177a892/t/6117cd3392b8dd44b5ac676b/1628949811699/Freschezza+Normal.otf');
}

h1, h2, h3, h4 { 
    font-family: 'okemo';
}
p { 
    font-family: 'freschezza'; 
}

Thank you so much! 

Hello, 

What about assigning each number of the paragraph a custom font. I have realised that I could only assign each header a different font, however, it's not the case for paragraphs. 

Would highly appreciate the trick 

Best, 

E

@Enkue add :nth-child(1) to do this. replace 1 with 2 to style the second paragraph in a set of paragraphs etc.  you might find you get some oddities with this because you can't be sure where squarespace are going to opt to use the paragraph tag, but it'll probably be mostly ok. if there are problems then you'll need a more specific rule as this if very general.

so something like this will style the first paragraph with "freschezza" font and the others would be "okemo":

@font-face {
    font-family: 'okemo';
    src: url('https://static1.squarespace.com/static/60e62b67670179472177a892/t/6117cc3c4d93de1bc1c36a0a/1628949564190/okemo.otf');
}
@font-face {
    font-family: 'freschezza';
    src: url('https://static1.squarespace.com/static/60e62b67670179472177a892/t/6117cd3392b8dd44b5ac676b/1628949811699/Freschezza+Normal.otf');
}

p { 
    font-family: 'okemo';
}
p:nth-child(1) { 
    font-family: 'freschezza'; 
}

more details here:
CSS :nth-child() Selector (w3schools.com)

Hi there,

I am looking to use two new fonts on just two pages of my website and keep all other pages in the existing design. I want to use Hammersmith One and Playfair Display on those two stand alone pages. Anyone able to tell me how to do this please? 

My website https://www.bethanykohrt.com/

Any help gratefully received! Thank you,

Beth

On 3/9/2022 at 11:39 PM, BethTheArtist said:

Hi there,

I am looking to use two new fonts on just two pages of my website and keep all other pages in the existing design. I want to use Hammersmith One and Playfair Display on those two stand alone pages. Anyone able to tell me how to do this please? 

My website https://www.bethanykohrt.com/

Any help gratefully received! Thank you,

Beth

Can you share link to these pages? Which element you want to use Hammers/which element Playfair?