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

Custom font for blog title

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

Share this post


Link to post

10 answers to this question

Recommended Posts

  • 0

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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0
Posted (edited)

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

Share this post


Link to post
  • 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

Share this post


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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

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