Jump to content

Can I assign a custom font as default for whole site?

Recommended Posts

Site URL: https://www.mela.co.nz

Is there a way to universally override Squarespace's default fonts in a Brine template?

I've created my first Squarespace site using my client's custom webfonts, loaded via the CSS panel. Once loaded, I've assigned these to p, H1, H2, H3, H4 in the CSS panel.

But when browsing the site I still see Squarespace's default fonts here & there - like on mobile when I do a search, or when a page is not found. It's getting ridiculous adding CSS snippets to target every individual instance of the wrong (default) font.

Can I assign my own overriding default font?

Link to comment
  • Replies 24
  • Created
  • Last Reply
  • 3 weeks later...
On 5/2/2020 at 1:19 PM, Kirsten1570048772 said:

Thanks tuanphan

I gave it a go but unfortunately it replaced everything with that one font.

I'm using 3 fonts in the site, is there some CSS to target any font that's not assigned p, H1, H2, H3, H4?

@font-face {
	font-family: tuan;
	src: url(paste font file url here);
}
/* target all elements */
* {
	font-family: tuan !important;
}
p, h1, h3, h4, h5 {
	font-family: enter-font-name !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

On a related note, how do you adjust the different paragraph sizes? In the dropdown menu when formatting a text block, there's a "paragraph 1," "paragraph 2," paragraph 3" options. How do you create CSS to affect those? Making new classifications like you do with Headers (h1, h2, h3, etc.) don't seem to work: for instance, when I wrote p1, p2, p3 and assigned unique fonts to each the paragraph size font didn't change. How do I assign font sizes to those other paragraph options?

Link to comment
8 minutes ago, smgrant said:

On a related note, how do you adjust the different paragraph sizes? In the dropdown menu when formatting a text block, there's a "paragraph 1," "paragraph 2," paragraph 3" options. How do you create CSS to affect those? Making new classifications like you do with Headers (h1, h2, h3, etc.) don't seem to work: for instance, when I wrote p1, p2, p3 and assigned unique fonts to each the paragraph size font didn't change. How do I assign font sizes to those other paragraph options?

heading has 6 tags: h1 to h6

p in Squarespace has 3 class name: 

  • paragraph 1: p.sqsrte-large
  • paragraph 2: p
  • paragraph 3: p.sqsrte-small

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
10 minutes ago, smgrant said:

Oh my goodness, thank you so much. Is it possible to adjust text on pre-made newsletter sign-up blocks where text is displayed in front of images? Does it also have its own class name? 

Can you share link?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
4 hours ago, smgrant said:

Aaaaaaah. Okay, here it is: 

URL

https://caper-robin-ljl7.squarespace.com/

PW

Sq-strauss-method!

header.newsletter-form-header * {
    color: white !important;
    font-family: monospace !Important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
2 hours ago, AndyDevaney said:

This was very useful, do you know if it then makes the typekit fonts unavailable so as to free up page speeds?

Also if I want to keep my navigation menu to Aviano do I need to differentiate the CSS code as well?

Can you share link to your site? Each template needs different code

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
21 hours ago, AndyDevaney said:

Thank you, and what do I need to add to resize it please?

Also do you know how it is possible to remove all the fonts in the style tab as they are reducing the page speed load as they are 1mb

 

Q1. font-size: 15px !important;

Q2. You can't

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 4/15/2020 at 5:42 AM, tuanphan said:

@font-face {
	font-family: tuan;
	src: url(paste font file url here);
}
/* target all elements */
* {
	font-family: tuan !important;
}

 

Hi this is great it worked perfectly for me however on mobile the font is not the same is there a way to fix it on mobile with that single font i used? thank you 

Link to comment
20 hours ago, ZolaProdz said:

Hi this is great it worked perfectly for me however on mobile the font is not the same is there a way to fix it on mobile with that single font i used? thank you 

Can you share link to your site? Which elements has problem?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 7 months later...
On 5/5/2020 at 7:45 AM, tuanphan said:

@font-face {
	font-family: tuan;
	src: url(paste font file url here);
}
/* target all elements */
* {
	font-family: tuan !important;
}
p, h1, h3, h4, h5 {
	font-family: enter-font-name !important;
}

 

Hi tuanphan! 

sorry to hijack this thread but this answer was super useful to me but I'm having issues with the exceptions. They're not showing up with the correct font, they're showing up with a generic serif font.

Here is the code I'm using:

/* target all elements */
* {
	font-family: ia_writer_duo_sregular !important;
}
h1, h2, h3, h4, h5 {
	font-family: ia_writer_duo_bold !important;
}

As you can see in the screenshot it's the bold font thats not displaying correctly, both fonts are already in the css code. 

Thank you so much for helping me out!

Screen Shot 2021-02-05 at 22.16.59.png

Link to comment

@villavi3

Please post the URL to the page where you are having this issue.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@villavi3

All the fonts are the proper family on the elements that I can see. You might add the following to your rule-set.

font-weight : 600;

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.