Search the Community

Working on a portfolio using Jasper Template. I got the custom font to work for H2, H3 but I have no idea how to insert it into page description on the Index/Work page. This does not fall under main heading styles (nor does navigation) - so how to change these fonts to custom ones?

Hey Guys, So I added custom coding to the fonts but it isn't appearing on the live site. I can see it when I am on the Squarespace dashboard but not on the live site. Any help would be greatly appreciated. I've attached the desktop image as to what it should be and then mobile version of it showing incorrectly. Thanks,

I have inserted my fonts into css and they are all displaying how I want them. However, I'm not sure how to change the font of my thumbnail titles. I was hoping someone knew what to insert into the css, because I don't know how to code

I'd like to change the font color of the Welcome section of my home page only. There are legibility issues due to the background photo. The site is ruffstufftreats.com and the password is SpentGrainTreats. The text that needs the color changed is "Brewers' Grain Dog Treats Hand-crafted in Raleigh" I've tried a few variations of CSS but have not found the one that works.

I would like to change the font of my Blog Posts to a custom font. I have already added the font and am currently using it for my H1, but I don't know how to assign the custom font to blog titles. I was able to find two posts from Squarespace Answers addressing the issue, but when I navigate to the pages, it says they don't exist anymore. Any help would be greatly appreciated!!

I've imported a custom font and it only shows, when the page is being viewed with the "Custom CSS" page open. On the live site, or with another page open in Squarespace, the h1 and h2 fonts don't display correctly. See for yourselves here: https://www.svamae.com/test Here the CSS I've added under Custom CSS: @font-face { font-family: 'Airbnb Cereal App Book'; font-style: normal; font-weight: normal; src: local('Airbnb Cereal App Book'), url('https://static1.squarespace.com/static/5d1c5598b57288000189eb6d/t/5d8753ede7a89537827e6f0a/1569149934367/AirbnbCerealBook.woff') format('woff'); } @font-face { font-family: 'Airbnb Cereal App Light'; font-style: normal; font-weight: normal; src: local('Airbnb Cereal App Light'), url('https://static1.squarespace.com/static/5d1c5598b57288000189eb6d/t/5d8753fe1d47f936914afb20/1569149951081/AirbnbCerealLight.woff') format('woff'); } @font-face { font-family: 'Airbnb Cereal App Medium'; font-style: normal; font-weight: normal; src: local('Airbnb Cereal App Medium'), url('https://static1.squarespace.com/static/5d1c5598b57288000189eb6d/t/5d8753e21d47f936914afa03/1569149923170/AirbnbCerealMedium.woff') format('woff'); } @font-face { font-family: 'Airbnb Cereal App Bold'; font-style: normal; font-weight: normal; src: local('Airbnb Cereal App Bold'), url('https://static1.squarespace.com/static/5d1c5598b57288000189eb6d/t/5d8753ce68af88237828efed/1569149902585/AirbnbCerealBold.woff') format('woff'); } @font-face { font-family: 'Airbnb Cereal App Extra Bold'; font-style: normal; font-weight: normal; src: local('Airbnb Cereal App Extra Bold'), url('https://static1.squarespace.com/static/5d1c5598b57288000189eb6d/t/5d8753f81d47f936914afaf1/1569149944845/AirbnbCerealExtraBold.woff') format('woff'); } @font-face { font-family: 'Airbnb Cereal App Black'; font-style: normal; font-weight: normal; src: local('Airbnb Cereal App Black'), url('https://static1.squarespace.com/static/5d1c5598b57288000189eb6d/t/5d8753b414ffd35492a0c69c/1569149877286/AirbnbCerealBlack.woff') format('woff'); } h1 { font-family: 'Airbnb Cereal App Black' !important; font-size: 34px; font-weight: 700; letter-spacing: -0.8px; color: #2b2b2b; } h1 strong { font-weight: bold; font-family: 'Airbnb Cereal App Light' !important; color: #767676; line-height: 10px; font-weight: 100; font-size: 32px; letter-spacing: -0.8px; margin-bottom: 32px; } h2 { font-family: 'Airbnb Cereal App Light' !important; color: #767676; line-height: 40px; font-weight: 100; font-size: 34px; letter-spacing: -0.8px; margin-bottom: 32px; } h3 { font-family: 'Airbnb Cereal App light' !important; color: #767676; line-height: 15px; letter-spacing: -0.5px; } Thanks for any input - I've ran out of ideas on how to fix this…

When I change the banner font, the nav font and h1 font also changes. I use these codes: H1 @font-face { font-family: "mostard"; src: url(https://static1.squarespace.com/static/5d8bc14279ccce344e38d1df/t/5d8c8c823b747142ae75cf16/1569492098311/Mostardesign+-+Sofia+Pro+Bold.woff);} h1 * { font-family: 'mostard' !important; } NAV FONT @font-face { font-family: "mostard"; src: url(https://static1.squarespace.com/static/5d8bc14279ccce344e38d1df/t/5d8c85d46412ab652b47176e/1569490388458/Mostardesign+-+Sofia+Pro+Medium.woff);} header#header * { font-family: 'mostard' !important; } BANNER @font-face { font-family: "mostard"; src: url(https://static1.squarespace.com/static/5d8bc14279ccce344e38d1df/t/5d8c8c823b747142ae75cf16/1569492098311/Mostardesign+-+Sofia+Pro+Bold.woff);} .index-item-title { font-family: mostard; } @tuanphan please help

I am using the nueva template (brine family) squarespace version 7.1. I wanted my folder in the header navigation to link to the first page in the list. To do this, i put 1.< a href="mission">About Under "Navigation Title" under the configure folder settings. It works, in that clicking "about" in the header nav now takes user directly to "/mission" BUT now the word "About" in the header nav appears slightly lower than the other navigation options. The website is not published yet, but here is what the issue looks like: The formatting change goes away when i remove the code in the navigation title.Any help would be greatly appreciated!!! Ps: I got the information on how to do the folder navigation title insert here: https://answers.squarespace.com/questions/13008/folder-navigation%3A-top-folder-doesnt-link-to-anything%2C-can-i-get-it-to-or-remove-link-behavior.html

Hi, How can I change the font size of selected boxes here and the submit button to 12px? Currently they are slightly bigger than the rest. Also, how can I change the colour of the button to black (currently it's dark grey)? screen: https://imgur.com/auwI6mt website:https://marigold-onion-dm3a.squarespace.comPassword: Campcamp1 @tuanphan

Hi, How could I change the font of the privacy pop up and newsletter autofilled boxes (and colour of auto filled boxes to white - currently light blue)? (Screen attached): https://imgur.com/YftI6bo website: https://marigold-onion-dm3a.squarespace.comPassword: Campcamp1 @tuanphan Regards

Hi there! I'm trying to justify all text on my avenue theme. I've tried inserting some of the other codes offered to justify text, but nothing is happening... my site is www.bigfeelslab.com in case that's helpful. thanks in advance for any insight!

Hi there,I have managed to change the body text to my desired font on my website, but cannot change the Nav, Title or Titles of my blog posts in Tremont.Link to my page is as follows:https://flower-jaguar-tpnb.squarespace.com/config/designAny help would be most appreciated :-)ThanksVanessa

I am using Hypatia Sans for my body copy, which is a preloaded font. I am using 300 weight and the default bold is very heavy. I would like to bring the bold down to the 600 weight. I have found how to adjust the bold across the entire website, but not for just the body copy. I have files with the 300 and 600 weights in normal, but not italic. I can upload those, and set the body copy in the style editor, but since I don't have the italic versions it isn't working very well. is there a way to adjust the bold using the preloaded weights and not uploading the fonts again? Thanks!

Right now I'm trying to change the font style of the gallery blocks on my home page for the template "Impact". (See Attached) I'm using ".sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { font-family: "LaborUnion" !important }" but it doesn't seem to be working. The file can be found here: https://nectarine-lime-6www.squarespace.com/

My font is coded in and hosted all over my site but I'm unable to find a css code that will allow me to add a custom font into the gallery block. The text currently overlays the image

The following issues were found on your site: Text too small to read I'm certain it is referring to the default caption font located under the image within the image blocks. How can I make them larger on the mobile version of the site? I am using the Margot template.

Hi, I wish to amend the font size of just one page but with the use of square space, I can only amend font size sitewide. I have seen some responses say add this CSS code to the custom CSS page but when I do nothing happens. I have never used CSS before. Can you advise? Thanks,Jordan

How do I change the font in the drop down menu... it does not match the other fonts at all. Additional info... just to be 100% clear, when I attempt to add a product to cart and or click on a variant... the font for the variant is Garamond where as I'm hoping it can be the same matching font as the rest of the entire site. When I go into site styles, there's no option for me to change the drop down menu font. I've searched online for this answer but can't seem to find a resolve. thanks!

Hello, I'm trying building a simple landing page website and would like to use Bree Serif and Gibson typefaces. How can I install these fonts?

Using the Jasper template. Here is the code I'm using: @font-face { font-family: "Metropolis"; src: url(https://static1.squarespace.com/static/5d707e930fec5500014bea13/t/5d786e87913a06645e30fa5f/1568173704160/Metropolis-Medium.woff2), url(https://static1.squarespace.com/static/5d707e930fec5500014bea13/t/5d786e789da84f77dcfe024c/1568173688518/Metropolis-Medium.woff), url(https://static1.squarespace.com/static/5d707e930fec5500014bea13/t/5d786eaf9da84f77dcfe0813/1568173744007/Metropolis-Medium.otf);} header#header * { font-family: 'Metropolis' !important; font-size: 22px!important; } h1 { font-family: 'Metropolis' !important; font-size: 22px!important; }

How can I change the font in the dropdown menu in the ordering process when selecting variants?

Hello, I'm using the Avenue template, and have uploaded a font in CSS and changed it in the H1, H2, and P sections fine, but have no idea how to do it for navigation.Any codes or tips would be very helpful, Thanks!!

Hi! I'm super new to CSS and coding so please be as thorough as possible. I downloaded a custom font (HelveticaNow) and I have successfully applied it to my headers and body text through CSS. If it's relevant, the template I am using is Native. Here is what has worked for me as far as body text goes: @font-face { font-family: 'HELVETICANOW'; src: url('https://static1.squarespace.com/static/5d6c2d758a0acc000187f3f5/t/5d795050146faa22dd3e6e24/1568231504475/HelveticaNowDisplayXBlk.otf'); } p {font-family: 'helveticanow';} font-size: 14px; I've also gotten the headers to work using a nearly identical code (just putting h1, h2, h3, etc., in place of the p on line 6). My trouble now comes with trying to apply this to the site title. I've looked at numerous Q&A's and videos but nothing has worked for me. I also have yet to attempt adding a custom font to the navigation bar, though I would also like to eventually do that aswell; if someone could include the coding for the navigation bar in addition to the site title, that would be awesome. Thanks! (p.s.) Since I am so incredibly new to CSS, I would greatly appreciate a simple copy-and-paste solution, if possible :)

Trying to customize my font in the Jasper template with the following code. Any suggestions? @font-face { font-family: "METROPOLIS"; src: url(https://static1.squarespace.com/static/5d707e930fec5500014bea13/t/5d786e87913a06645e30fa5f/1568173704160/Metropolis-Medium.woff2), url(https://static1.squarespace.com/static/5d707e930fec5500014bea13/t/5d786e789da84f77dcfe024c/1568173688518/Metropolis-Medium.woff), url(https://static1.squarespace.com/static/5d707e930fec5500014bea13/t/5d786eaf9da84f77dcfe0813/1568173744007/Metropolis-Medium.otf);} .Header-nav { font-family: 'METROPOLIS' !important; }

I'm working on my store and it looks great on desktop, but the product titles are not scaling on mobile. On Brine template. Any suggestions? silverlakecarclub.com/shop