Jump to content

Site-wide H1 font different to banner text custom font H1

Recommended Posts

Hello.... I have a custom font for H1 in Custom CSS which works fine across site (7.0 Brine).

I now need the custom font to be used ONLY for H1 in the page banners (intro area in the bottom header banner). The site-wide H1 will now be a standard font used across the site (editable in Design > Site Styles etc).

Very grateful for help. Thank you.

Link to comment
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hi Tuanphan

The site is at www.kinesiology.com.  As you can see the page banners use the brand font (which is a custom installed font) for the h1 title. We used H2 etc for main page content headers. We are setting up some calendar events and the h1 pulls in the custom font.  So we need a way to use Squarespace fonts for h1 and custom font on banners only.  The solution needs to be site wide so the client can add a page with custom font in banner without coding herself etc. If this is not possible maybe we change the h1 font on the Events page instead? 

Thank you again.

Link to comment
4 minutes ago, ali.duffell said:

Sorry Tuanphan  my link was wrong.... many apologies - here is correct one: www.kinesiologydubai.com

Add to Home > Design > Custom CSS

div#block-c5fe4fdc11ae8cafe4e7 h1 {
    font-family: fantasy;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Thanks for quick reply. I tried code instead of h1 bit of current code - but it de-activates the Apalu font....  here is current code for h1:

@font-face {
font-family: 'Apalu';   
src: 
url(https://static1.squarespace.com/static/5a09e383010027aff70c2776/t/5ce6aff1e2c4835031d1b3d5/1558622193802/Apalu.ttf), 
url(https://static1.squarespace.com/static/5a09e383010027aff70c2776/t/5ce6b021e4966b6a53b8f168/1558622241398/apalu-webfont.woff), 
url(https://static1.squarespace.com/static/5a09e383010027aff70c2776/t/5ce6b02fe79c706322dee943/1558622255776/apalu-webfont.woff2); 
}
h1
{
  font-family: 'Apalu';
}

Link to comment

Hi TP thanks! But it is site wide requirement not page only. Site-wide H1 in banners.

Quote

The solution needs to be site wide so the client can add a page with custom font in banner without coding herself etc.

 

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.