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

Edit font style for H4-H6 in CSS


michael06

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
Link to post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

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)

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.

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

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