Jump to content

change tag-line font with css on 7.0

Go to solution Solved by Caroline_Smith,

Recommended Posts

Posted (edited)

Hi all,

due to the google font thing going on right now with DSVGO in germany i changed my fonts on the website (https://www.fatrat.de/)

It's running on Squarspace 7.0 and the theme is called "Trombone Shorty" If i recall correctly

So far I got everything up and running with CSS, Navigation and other texts seem to work just fine, it's only the tag-line under the logo that's causing me a headache right now. With Mozilla Inspector i found tag-line, site-title, title-area, but everything i tried doesn't seem to trigger this exact code snippet (i.e. site-tagline { font-family: 'Hind';} and other variants that seemed logic to me according to the nav# inserts)

Can anybody help me out please? This is the code I inserted so far for the other parts of the website:

EDIT: just found out that

p {
font-family: 'Hind' !important;
}

seems to work, i would just like to know if there's a "better" way of doing it just for the tag-line.

 

//insert Google Font
@font-face {
font-family: Hind;
src: url(https://static1.squarespace.com/static/59e5f5368dd041cf607681d9/t/635a5dbafe2ce0693d5ea65b/1666866620134/Hind-Regular.ttf);
}

h1 {
font-family: 'Hind';
}

h2 {
font-family: 'Hind';
}

h3 {
font-family: 'Hind';
}

p {
font-family: 'Hind';
}

nav#main-navigation ul li a {
    font-family: 'Hind';
}


nav#mobile-navigation  ul li a {
    font-family: 'Hind';
}

#mobile-navigation-label:after  {
    font-family: 'Hind';
}

Thanks a lot in advance!
Peter

Edited by fatrat
  • Replies 2
  • Views 737
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution
Posted (edited)

You could use the class selector to select .site-tagline. This will ensure only the tagline is applying the CSS rule instead of all paragraphs, unless you wanted all paragraphs to have that font-family then you would just use your initial code snippet.

.site-tagline {
    font-family: 'Hind' !important;
}

 

Edited by Caroline_Smith

Feel free to email me with any customization inquiries or questions you may have!

Free Squarespace Resources: DevTools Minicourse,  11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator

Posted
On 10/28/2022 at 2:58 PM, Caroline_Smith said:

You could use the class selector to select .site-tagline. This will ensure only the tagline is applying the CSS rule instead of all paragraphs, unless you wanted all paragraphs to have that font-family then you would just use your initial code snippet.

.site-tagline {
    font-family: 'Hind' !important;
}

 

thank you so much, this did the trick!

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.