Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
boomer

How do I change the fonts on just one page?

Question

12 answers to this question

Recommended Posts

  • 4

Login to your Sqaurespace site and select the page you want to edit. Then select that page’s settings and choose Advanced settings. In the Header injection, if you’re wishing to change the text, you add:


<style>
p {
 font-size: 30px;
 color: red;
}
h1 {
 font-size: 40px;
 color: #fff;
}
</style>

You’d benefit more if you provided a link to your site and asked a specific question like: How do I make the font of the third paragraph a size of 22 with a color of purple, underlined, and bold?

Edited by tazmeah

Share this post


Link to post
  • 1

@mdmclean88, I’ve tidied up your answer a little bit and formatted the CSS so it appears as code.

There’s no technical limits on trial sites either, so I removed that bit at the end.

One question for you, do you mean for all of those elements (h1, h2, h3, p and strong) to have the same style (black in this case)?

If you do, that code can be simplified further through the power of Less:


#collection-546acd18e4b07469c8b9ee9f .desc-wrapper {
 h1, h2, h3, p, { color: black !important; }
}

Edited by neeklamy

The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Share this post


Link to post
  • 0

You just have to write a more specific CSS rule using the specific page class that is generated on the body tag. Just depends which page you want to use and how you want to target/specify the rule.

For example, if you want to bold the font on the Collection List page, you could do:


.collection-type-blog.view-list h1 {font-weight: bold;} 

Or italicize on the blog item page:


.collection-type-blog.view-item h1 {font-style: italic;}

Share this post


Link to post
  • 0

I finally figured out how to change header font colour on a specific page in Bedford.Huge thanks to the community for all the breadcrumbs. Hopefully this prevents someone else from going insane.

  1. Find your Collection ID for the page you want to change the header font colour for (Find collection ID in Squarespace 7)
  2. Go to your Custom CSS Editor
  3. Add these 5 lines of CSS to be sure it captures all text in the top section. Remember to change the Collection ID (546…) to your own:
    
    
    #collection-546acd18e4b07469c8b9ee9f .desc-wrapper h1 { color: black !important; }#collection-546acd18e4b07469c8b9ee9f .desc-wrapper h2 { color: black !important; }#collection-546acd18e4b07469c8b9ee9f .desc-wrapper h3 { color: black !important; }#collection-546acd18e4b07469c8b9ee9f .desc-wrapper p { color: black !important; }#collection-546acd18e4b07469c8b9ee9f .desc-wrapper strong { color: black !important; }

    If you don’t use desc-wrapper then I believe it will change all of the elements (h1, h2, h3, p, strong) on the whole page. Whereas we just want to change it in the header.

To see it in action: http://matt-mclean-ikjo.squarespace.com/blog

Edited by mdmclean88
Tidy

Share this post


Link to post
  • 0

You’re welcome, the only thing I should add is that currently Squarespace’s version of Less is at 1.3.3 and the official Less project is at 2.0.

I’m not sure how much this affects us though, the official documentation is a bit thin on the ground when it comes to what’s changed.


The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Share this post


Link to post
  • 0

Hello Peter Rox of The Future - I have added above code in the custom css:

collection-546acd18e4b07469c8b9ee9f .desc-wrapper {

h1, h2, h3, p, strong { color: black !important; } }

I have changed the ID number with the one of my page.

What additional code do I have to add and where to change the font colour on a section of an index page?

thanks a lot!

Share this post


Link to post
  • 0

Hey There .Similar Question.

My tagline reads "Abby & Austin"

I'd like to change the word Austin to be in Italics while the word Abby remains standard, any code help?

Also, how would I inject different color, font type, and font size. Thanks

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...