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

Edit font style for H4-H6 in CSS

Question

I have found this page , which talks about adding more font styles by adding h4-h6 headers through CSS (I used the answer provided by Dan).However, the answer doesn't seem to include a solution for how to edit the font style. For example, Proxima Nova is my font, and I want my font style to be Proxima Nova Light.

Does anyone know what I can add to the CSS to get this done?

Edited by michael06

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 1

I've actually created a plugin that adds h4, h5, h6 to the Squarespace text editor as an alternative to using a markdown block or code block, so that you can simply add headings along with the rest of your text (without adding extra gaps).

To style any h4, h5, or h6 headings you add (whether via code block, markdown block or the Squint plugin), you'll need to add the styles via the CSS Editor in order to customize them. Like this, for example:


h4 {
 font-family: "Times New Roman", Times, serif;
 font-weight: 300;
 font-size: 26px;
 line-height: 1.4em;
 color: #404040;
}

h5 {
 font-family: "Times New Roman", Times, serif;
 font-weight: 300;
 font-size: 22px;
 line-height: 1.4em;
 color: #404040;
}

h6 {
 font-family: "Times New Roman", Times, serif;
 font-weight: 300;
 font-size: 19px;
 line-height: 1.4em;
 color: #404040;
}

The above is of course just an example; you'd set your own styles according to your preferences. Regarding the

font-family

rules, if your font has spaces in the name, surround it with quotes, otherwise, no need for quotes. Also, there is no need for parenthesis around the values, which you might think based on the first answer above.

-Brandon
Project Mgr. and Developer at Ignertia
Creator of Squint - H4, H5, H6 & Custom Styles for Squarespace


Edited by brandon
Initial Revision

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0

it should just be


h4 {
font-family: (whatever font you want);
color: (whatever color you want);
font-size: (Whatever size you want);
}


I like stuff. I bet you do too. I don't know what to write here? Later.

Share this post


Link to post
  • 0

Does anyone know how to apply this to a paragraph or title on the site? I have it added to my css. I cannot use the plugin since it doesnt work with the newest version of squarespace.

 

Share this post


Link to post
  • 0
14 hours ago, michellebrook55 said:

Does anyone know how to apply this to a paragraph or title on the site? I have it added to my css. I cannot use the plugin since it doesnt work with the newest version of squarespace.

 

Can you share link to your site? I can take a look


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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