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

Custom font for blog title


MoniqueShaw

Question

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

Link to comment

14 answers to this question

Recommended Posts

  • 1

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;
}

 

Link to comment
  • 0
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?

Link to comment
  • 0

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

Edited by MoniqueShaw
Link to comment
  • 0

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

Link to comment
  • 0
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;
}

 

Link to comment
  • 0
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.

Link to comment
  • 0

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;
}

 

 

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...