Custom font for blog title

Site URL: https://www.rewriterewrite.com/blog/the-power-of-personal-brand-at-work

Hi there

I am trying to change the titles of my blog posts to my custom font using the custom css option. I have tried as many suggestions i have been able to find on here but nothing is working. I have been able to customise all my other titles, buttons etc but i cant seem to find anything that is working for blog titles.

Any help would be greatly appreciated

Thanks

1. Upload font file to your site. https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

2. Add this code to Home > Design > Custom CSS

@font-face {
	font-family: tuanphan;
	src: url(paste font file url here);
}
.blog-item-title h1.entry-title {
    font-family: tuanphan !important;
}

Hi @tuanphan

Thank you so much for coming back to me so quickly, but this doesn't seem to work for me for some reason. Do you have any thoughts as to why at all? 

Thanks

1 minute ago, MoniqueShaw said:

Hi @tuanphan

Thank you so much for coming back to me so quickly, but this doesn't seem to work for me for some reason. Do you have any thoughts as to why at all? 

 

Thanks

Which code did you insert?

The code isn't going to work without uploading a font file for folks reading this thread.  

https://www.kayleighnoele.com/blog/how-to-upload-a-custom-font-to-squarespace

https://www.dafont.com/ Lots and lots of fonts, free!

Hi @tuanphan

I added this code:

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

I already had the fonts loaded that i wanted to use and switched out your font name for the font i wanted to use, so it looked like this:

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

I also tried:

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

Thanks

Use this code

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

1 minute ago, tuanphan said:

Use this code

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

That should do it!

It worked!! Thank you both so so so much! 

Hi All,

I have a custom font and I have added in the codes to use these for H1, H2, H3, H4, P etc.

@font-face {
    font-family: 'BasisGrotesquePro';
       src: url('https://static1.squarespace.com/static/5dc147d0c6dfdc071d52d626/t/5e7aba7ca2bf8526c31b4f74/1585101438622/FontsFree-Net-BasisGrotesquePro-Light.otf');
  }

h1 {font-family: 'BasicGrotesquePro';}
h2 {font-family: 'BasicGrotesquePro';}
h3 {font-family: 'BasicGrotesquePro';}
P {font-family: 'BasicGrotesquePro';}

.Header-nav-inner a {
   font-family: Basisgrotesquepro;
}

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

/* Custom Font - Header Main Navigation */
.main-nav * {
   font-family: 'Basisgrotesquepro' !important;
}

How do I add this for absoutely every piece of font on my page?

i.e Gallery Title Font

Product Font

Product Title Font

Product Pricing Font    

Etc

Is there something that will overwrite all fonts with my custom font? 

(or does my code cover every 'type' of font on the page and it maybe looks different because the weight differs for each heading/font type?)

I am using Template: Hyde

https://www.setcollective.com.au/welcome

Thanks, 

Leanne

36 minutes ago, LeeLee said:

Hi All,

I have a custom font and I have added in the codes to use these for H1, H2, H3, H4, P etc.

@font-face {
    font-family: 'BasisGrotesquePro';
       src: url('https://static1.squarespace.com/static/5dc147d0c6dfdc071d52d626/t/5e7aba7ca2bf8526c31b4f74/1585101438622/FontsFree-Net-BasisGrotesquePro-Light.otf');
  }

h1 {font-family: 'BasicGrotesquePro';}
h2 {font-family: 'BasicGrotesquePro';}
h3 {font-family: 'BasicGrotesquePro';}
P {font-family: 'BasicGrotesquePro';}

.Header-nav-inner a {
   font-family: Basisgrotesquepro;
}

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

/* Custom Font - Header Main Navigation */
.main-nav * {
   font-family: 'Basisgrotesquepro' !important;
}

How do I add this for absoutely every piece of font on my page?

i.e Gallery Title Font

Product Font

Product Title Font

Product Pricing Font    

Etc

Is there something that will overwrite all fonts with my custom font? 

(or does my code cover every 'type' of font on the page and it maybe looks different because the weight differs for each heading/font type?)

I am using Template: Hyde

https://www.setcollective.com.au/welcome

Thanks, 

Leanne

If you want to apply for all elements on your site, use this CSS

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

Hi All, 

I've tried all the codes above and I'm not getting any results to where it says "Ana & Octavio. 

Any help is appreciated!

Best,

Pilar

21 hours ago, PilarS said:

Hi All, 

I've tried all the codes above and I'm not getting any results to where it says "Ana & Octavio. 

Any help is appreciated!

Best,

Pilar

Can you share link to your site? We can check easier.

@tuanphan - I am struggling to get the code to work on my new site too. 

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

With no sucess. 

https://bird-walrus-8l8c.squarespace.com/

Update! I figured this out. Incase anyone else is having difficulties. I am using Brine. I inspected the elements and it just looks like the naming is slightly different... 

For the blog headings:

h1.BlogItem-title {
    font-family: 'RoxboroughCF-Regular' !important;
}

For the list headings:

.BlogList-item-title {
    font-family: 'RoxboroughCF-Regular'
!important;
    font-size: 30px;
}

I have used all the coding you have shown here, and it worked when I am on the blog entry itself, but not the page that lists all the blog entries. 

On 2/3/2022 at 2:33 AM, houseofeades said:

I have used all the coding you have shown here, and it worked when I am on the blog entry itself, but not the page that lists all the blog entries. 

Can you share link to blog list page? We can help easier

Hey everyone! I was just having this issue too and reached out to a friend of mine for help. Here's the CSS code that they sent to update all the headings on the main blog page:

.blog-basic-grid .blog-title {font-family:'RoxboroughCF-Regular';}

This code was specifically for a "basic grid" formatted blog, so you'll probably need to adjust the CSS for other types of blog layouts. 

Also, just in case you need it, here's the CSS code to update the pagination font as well: 

.item-pagination-link .item-pagination-title {font-family: 'RoxboroughCF-Regular';}

Thanks so much & let me know if this helped!

Alyssa Parr
Squarespace Expert & CEO of Luminescent Dreams | Tutorials | Templates | Portfolio
👩‍💻 Hire me to build or edit your website: VIP Days | Custom Web Design
alyssa@luminescentdreams.com

On 11/3/2023 at 10:50 PM, luminescentdreams said:

Hey everyone! I was just having this issue too and reached out to a friend of mine for help. Here's the CSS code that they sent to update all the headings on the main blog page:

.blog-basic-grid .blog-title {font-family:'RoxboroughCF-Regular';}

This code was specifically for a "basic grid" formatted blog, so you'll probably need to adjust the CSS for other types of blog layouts. 

Also, just in case you need it, here's the CSS code to update the pagination font as well: 

.item-pagination-link .item-pagination-title {font-family: 'RoxboroughCF-Regular';}

 

Thanks so much & let me know if this helped!

Alyssa Parr
Squarespace Expert & CEO of Luminescent Dreams | Tutorials | Templates | Portfolio
👩‍💻 Hire me to build or edit your website: VIP Days | Custom Web Design
alyssa@luminescentdreams.com

To target all blog format, you can change the line

.blog-basic-grid

to

[class*="type-blog"]