Jump to content

How to change all font except site header title?

Recommended Posts

Posted

Site URL: https://www.myliminal.co

I'm trying to make the the entire site have a specific custom font except for the header title text which I want to be a different custom font.

This is my CSS code:

@font-face { 
	font-family: 'JennaSue';
	src: url('https://static1.squarespace.com/static/617131152993aa572166f333/t/6176d11e66db235b0a6cf4fb/1635176734215/._JennaSue.ttf');
}

@font-face { 
	font-family: 'JennaSueItalic';
	src: url(https://static1.squarespace.com/static/617131152993aa572166f333/t/61770dddf22bc004a409c794/1635192286037/JennaSue.ttf);
}

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

.header-title-text {
  font-family: 'JennaSueItalic'
}

This doesn't seem to work, however. It changes the site-wide font to JennaSue including the header, but the header doesn't change to JennaSueItalic.

Any help would be greatly appreciated. Thanks! 

  • Replies 3
  • Views 415
  • Created
  • Last Reply
Posted

The above font changes does not reflect the live version. From my end, the website is being entirely displayed in "Times" font. Did you remove the custom font while you're testing?

To change the font text for the title only the CSS would be:

.header-title-text a {
font-family: "YOUR_FONT_HERE";
}

"a" - is the name of the element that contains your text

For the most part, when changing the font styles for elements it is important to be as specific as you can with targeting the correct selectors.

Posted
12 minutes ago, Wolfsilon said:

The above font changes does not reflect the live version. From my end, the website is being entirely displayed in "Times" font. Did you remove the custom font while you're testing?

Are you sure? I'm looking at the live version right now and it's displaying as my custom font, JennaSue.

I want to change the font for the whole website to JennaSue apart from the header title text, which I would like to be an italicized version of JennaSue (in this case, a completely different from, as you can see from above code:

54 minutes ago, hjl said:
@font-face { 
	font-family: 'JennaSue';
	src: url('https://static1.squarespace.com/static/617131152993aa572166f333/t/6176d11e66db235b0a6cf4fb/1635176734215/._JennaSue.ttf');
}

@font-face { 
	font-family: 'JennaSueItalic';
	src: url(https://static1.squarespace.com/static/617131152993aa572166f333/t/61770dddf22bc004a409c794/1635192286037/JennaSue.ttf);
}

I tried your suggestion:

13 minutes ago, Wolfsilon said:

To change the font text for the title only the CSS would be:

.header-title-text a {
font-family: "YOUR_FONT_HERE";
}

"a" - is the name of the element that contains your text

but it doesn't seem to work either. The whole website including the header title text continues to show in JennaSue

Posted

Could be on my end, something blocking the src but here's a screenshot.

I don't really have an idea of what the font should look like so my apologies if it is looking how it's supposed to.

 

sqsfontcheck.png

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.