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