Custom Font

Hello,

I want to change the font for a specific page. If I change it from the Site Styles, it would edit the whole website's font.

What custom css should I use to have a different font for a specific blank page. This is it: https://mastercarsreview.com/gallery

Thank you!

You can use the ID of the specific page to only target the font you on that page. In this case, the ID of your gallery page is #collection-5d84d1d7b2a12958f2942c36

I don't know what font you want to use or which text you want to change - body font or title fonts, or both... I'm just assuming you needed to change h1. 

#collection-5d84d1d7b2a12958f2942c36 h1 {
	font-family: acumin-pro-extra-condensed; /*change to the font you want to use*/
}

8 minutes ago, lu.diehl said:

You can use the ID of the specific page to only target the font you on that page. In this case, the ID of your gallery page is #collection-5d84d1d7b2a12958f2942c36

I don't know what font you want to use or which text you want to change - body font or title fonts, or both... I'm just assuming you needed to change h1. 

#collection-5d84d1d7b2a12958f2942c36 h1 {
	font-family: acumin-pro-extra-condensed; /*change to the font you want to use*/
}

 

All right that's great! Thanks!

But I also want to edit the titles under the images too. 

Can I do that? How?

12 minutes ago, Ghady said:

All right that's great! Thanks!

But I also want to edit the titles under the images too. 

Can I do that? How?

Sure!

#collection-5d84d1d7b2a12958f2942c36 .image-title p {
    font-family: acumin-pro-extra-condensed!important;
}

17 minutes ago, lu.diehl said:

Sure!

#collection-5d84d1d7b2a12958f2942c36 .image-title p {
    font-family: acumin-pro-extra-condensed!important;
}

 

Thanks again for replying. However, this custom css isn't working! What shall I do?

12 minutes ago, Ghady said:

Thanks again for replying. However, this custom css isn't working! What shall I do?

Ok, try removing the previous code and add this one piece of code which should work for both your h1 and image titles. Let me know if it works now.

#collection-5d84d1d7b2a12958f2942c36{
	h1, .image-title p{
    	font-family: garamond!important;
  }
}

On 11/14/2019 at 5:46 PM, lu.diehl said:

Ok, try removing the previous code and add this one piece of code which should work for both your h1 and image titles. Let me know if it works now.

#collection-5d84d1d7b2a12958f2942c36{
	h1, .image-title p{
    	font-family: garamond!important;
  }
}

 

Thank you so much! It worked!