Jump to content

Changing Fonts (not even only H1, H2, etc.)

Recommended Posts

Site URL: https://lizard-celery-sz6r.squarespace.com

Hey Guys, 

how can I change all the fonts on my site. Even the navigation or all the paragraph styles?! I don't know how the syntax/tag is for everything else than the headlines and the standard paragraph. H1, H2, etc. and p I already changed. But what are the codes for the other styles...? Is there a list somewhere? 

Thats the code I use atm and it works quite well...for the described font styles:

@font-face {
    font-family: 'Klavika';
       src: url('https://static1.squarespace.com/static/618a5f10647e59773828b0ca/t/618a857e4dbdf67f7c0b6b92/1636468095601/klavika-bold.otfhttps://static1.squarespace.com/static/618a5f10647e59773828b0ca/t/618a86047bae101273fafe4c/1636468231082/klavika-medium.otf');
    font-weight: Medium;
    font-style: Normal;
  }
h1 {
  font-family: 'Klavika';
}

h2 {
  font-family: 'Klavika';
}

p {
  font-family: 'Klavika';
}

Thanks in advance and best regards 

Marc

P.S.: Password for the Site is fontlove

Edited by marc.wiegelmann
Link to comment
On 11/10/2021 at 12:36 PM, marc.wiegelmann said:

Site URL: https://lizard-celery-sz6r.squarespace.com

Hey Guys, 

how can I change all the fonts on my site. Even the navigation or all the paragraph styles?! I don't know how the syntax/tag is for everything else than the headlines and the standard paragraph. H1, H2, etc. and p I already changed. But what are the codes for the other styles...? Is there a list somewhere? 

Thats the code I use atm and it works quite well...for the described font styles:

@font-face {
    font-family: 'Klavika';
       src: url('https://static1.squarespace.com/static/618a5f10647e59773828b0ca/t/618a857e4dbdf67f7c0b6b92/1636468095601/klavika-bold.otfhttps://static1.squarespace.com/static/618a5f10647e59773828b0ca/t/618a86047bae101273fafe4c/1636468231082/klavika-medium.otf');
    font-weight: Medium;
    font-style: Normal;
  }
h1 {
  font-family: 'Klavika';
}

h2 {
  font-family: 'Klavika';
}

p {
  font-family: 'Klavika';
}

Thanks in advance and best regards 

Marc

P.S.: Password for the Site is fontlove

You can try adding to Home > Design > Custom Css

* {
  font-family:'Klavika' !important;
}

The usage of important in Css: https://www.w3schools.com/css/css_important.asp

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 11/11/2021 at 2:42 PM, bangank36 said:

You can try adding to Home > Design > Custom Css

* {
  font-family:'Klavika' !important;
}

The usage of important in Css: https://www.w3schools.com/css/css_important.asp

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Thank you! 😄 Ok got that! That works for the whole Site then, right? Meanwhile I found this piece of code to set the Navigation to the right font:

.header-nav *, nav.header-menu-nav-list * {
    font-family: 'Klavika';
}
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.