Jump to content

Add a custom font to the Page Title Overlay and Description in the Tremont Template

Recommended Posts

Site URL: https://tealthomsen.com/

Hello, 

I have added a custom font through CSS that I am using for my Site Title and Tagline. I would like to use this same font for the Page Titles and Descriptions that appear as an overlay in both my gallery pages and regular pages. Examples below - 

Gallery Page - https://tealthomsen.com/spaces - I want to target the page title, "Spaces"  and the text below it to use a custom font. 

Regular Page - https://tealthomsen.com/about - I want to target  the page title, "Info" to use a custom font. 

I have tried .page-title and .page-description but no luck. 

The CSS I am currently using to customize the font fo the site title and tagline is below. 

@font-face {

    font-family: 'PostalServiceOutline';

       src: url('https://static1.squarespace.com/static/54adbf3ce4b02f8ed4174b5d/t/5f1f4ca997bb38421796f203/1595886764469/CN-Postal-Service-Outline.otf');}

@font-face {

    font-family: 'PostalService';

       src: url('https://static1.squarespace.com/static/54adbf3ce4b02f8ed4174b5d/t/5f1f4c9daae24951927da33b/1595886749856/CN-Postal-Service.otf');}


.site-title { font-family: "PostalServiceOutline";}

.site-tagline { font-family: "PostalService";} 

 

 

Link to comment
  • Replies 1
  • Created
  • Last Reply

You can use this selector

.page-title { font-family: "PostalServiceOutline" !important;}

.page-desc { font-family: "PostalService" !important;} 

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

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