Jump to content

How to change all font except site header title?

Recommended Posts

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! 

Link to comment

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.

Link to comment
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

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

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.