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

Custom Font for Site Title & Nav on Wells Template?


destinyestringer
Go to solution Solved by tuanphan,

Question

Hi! I just switched up to the Wells template. I want to change the Site Title and Navagation to a custom web font I have been using. I was able to do it to my old template, but that HTML/CSS is not working for this new template.

I have the font code:


@font-face {
 font-family: 'Recoleta';
 src: url('https://static1.squarespace.com/static/5928e31fe58c62d37df2a7d1/t/5d410d7047ee420001652090/1564544369780/39DCEF_0_0.woff2') format('woff2'), url('https://static1.squarespace.com/static/5928e31fe58c62d37df2a7d1/t/5d410d739a4d4a0001fa3e70/1564544371195/39DCEF_0_0.woff')  format('woff'),
url('https://static1.squarespace.com/static/5928e31fe58c62d37df2a7d1/t/5d410d63a71ed100016bafe7/1564544355607/Latinotype+-+Recoleta+SemiBold.otf')  format('otf');
}

but none of the HTML/CSS I have found is working for me.

I have tried each of these so far and nothing. (Each at one time, not together.)


 #headerNav nav a {
  font-family: 'Recoleta' !important;
}
.desc-wrapper p > strong {
  font-family: 'Recoleta' !important;
}

header h1.site-title {
font-family: "Recoleta"; }

.has-site-title .Header-branding { font-family: "Recoleta"; }


Any help would be appreciated! Thanks!

Edited by desibeee
Initial Revision
Link to post
  • Answers 39
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@desibeee Add to Home > Design > Custom CSS /* Font Recoleta Site Title */ .logo.site-title a { font-family: 'Recoleta' !important; } /* Font Nav */ div#topNav a { font-family: 'Recoleta

@k8lizzy Which element in header? Use this code for Miller & Juke Site Title /* Miller Site Title */ a.Header-branding, a.Mobile-bar-branding { font-family: 'Recoleta' !important; }

@k8lizzy Use block ID. Check with this tool. https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

Posted Images

Recommended Posts

  • 0
On 8/1/2019 at 4:01 PM, tuanphan said:

@desibeee Add to Home > Design > Custom CSS



 

/* Font Recoleta Site Title */
.logo.site-title a {
   font-family: 'Recoleta' !important;
}
/* Font Nav */
div#topNav a {
   font-family: 'Recoleta' !important;
}


Hi - I'm actually trying to use this exact same webfont in the site title/header of the Juke and Miller templates - for some reason this code didn't work with these.
 
Any idea what might work for these templates?
 
Thank you!!

 

 

Link to post
  • 0

@tuanphan thank you so much! that worked to change the header font.

 

do you happen to know what I could use to change the color of the h2 and body texts for a given page/section of the home index?

 

I tried to do it by inputting the page ID in CSS but that just changed the text color across all sections of the home index. 

 

thank you!

Link to post
  • 0

@tuanphan

I tried incorporating the codes to change the site title and nav that you stated above.

I'm using the Barbosa template
Do you know it?

this is the font I'm using- 

@font-face {
 font-family: 'Great'; 
src:url('//static1.squarespace.com/static/5dc2aa12fc03845d975c2da4/t/5dc2add27efe3d17730fba40/1573039571332/great-vibes.regular.ttf');
  font-weight: regular;
}
Link to post
  • 0
1 minute ago, jdl said:

@tuanphan

I tried incorporating the codes to change the site title and nav that you stated above.

I'm using the Barbosa template
Do you know it?

this is the font I'm using- 


@font-face {
 font-family: 'Great'; 
src:url('//static1.squarespace.com/static/5dc2aa12fc03845d975c2da4/t/5dc2add27efe3d17730fba40/1573039571332/great-vibes.regular.ttf');
  font-weight: regular;
}

Can you share link to your site? I can't find barbosa demo url

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
6 minutes ago, jdl said:
@font-face {
 font-family: 'Great'; 
src:url('//static1.squarespace.com/static/5dc2aa12fc03845d975c2da4/t/5dc2add27efe3d17730fba40/1573039571332/great-vibes.regular.ttf');
  font-weight: regular;
}
a#site-title {
    font-family: 'Great' !important;
}
.header-nav-item * {
    font-family: 'Great' !important;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
1 minute ago, Nicoleshurette said:

Im trying to add custom css to the Fulton template to change the fonts for H1, H2 and H3. But I am having zero luck. Any advice?

use this code, replace nav.index-navigation.collection-nav * with

h1, h2, h3

if it doesn't work, replace with

h1 *, h2 *, h3 *

if it still doesn't work, please share site url to check.

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
24 minutes ago, georgerobertatherton said:

Hey @tuanphan you're a bloody legend!

That worked perfect on the menu drop down navigation, however, it changes the MENU button on the home screen as well. Is there a way to keep this black?

See screenshot 

Remove above code, and use this

div#mobileNav * {
    color: #000;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

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