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

3 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

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...