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

@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;
}


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

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 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

@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;
}

 

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

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

@ddl_ellsie Add to Home > Design > Custom CSS

@font-face {
  font-family: ddlellsie;
  src: url(paste font url here);
}
.header-nav-item a {
  font-family: ddlellsie !important;
}

 

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

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

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

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

@ashleylgould Add to Home > Design > Custom CSS. replace monospace with your font

nav.index-navigation.collection-nav * {
    font-family: monospace !important;
}

 

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

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

Hey guys,

Does anyone know how to add a custom font to the Wells tagline?

Thanks!

Can you share link to your site? Wells demo has no tagline so can't check.

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

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

@georgerobertatherton Add to Home > Design > Custom CSS

div#mobileNav * {
    color: black !important;
}

 

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

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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