Search the Community

Anyone have luck changing the image block title & body text and the button text to a custom font via Font Face? I've tried a few options (see below) and nothing is changing. Thank you! a.sqs-block-button-element { font-family: "Gotham-Book2" !important; }.sqs-block-image .design-layout-overlap .image-title p { font-family: "Gotham-Book2" !important; }

Hi! I'm trying to change the font for the gallery image captions in the Avenue template. Right now they are set to the body style; I'd like to use the Heading 3 style instead. Can anyone help? Thank you!

Hello, I would like to code a custom font into the header of the mobile view of my website. I have done so successfully for the regular view but it defaults into standard font when i switch to mobile view. Any ideas?

Hi do you have a css code to customise font in the buttons and navigation?

I want to highlight one sentence in a product description by changing its color. I cannot believe that in the text format box there is no standard options for changing color of text. Just like there is right here where I am typing this! I have now spent 3 hours trying to figure out how to do it with no luck at all. I do not want to add a code block to the additional information area. I want this to appear right next to the product image, not underneath. There must be a way to do this? This should be something quick and simple... I just don't get it. I want my description to look like this: (which took me 1 second to do here) Design size is 24" x 27" stitched 2 over 2 on 28 count fabric. This is a digital file that will be emailed to you within 3 business days after purchase. I want the second sentence to be red. How do I do this? Thank you.

Hi, I have changed the layout of my website and now use large headings. This has also meant the blog titles are now huge on a desktop and only fit a few words on each line. Is there a way of customising the font size of just the blog titles please? I use the Horizon Template. Example of huge Blog titles: https://heathersmall-mpeople.com/news/heather-small-releases-new-moving-on-up-remixes-for-2019 Many thanks in advanced! Graham

Hello, I have managed to change the H1 of my website to my custom imported font using CCS coding however I cannot change my site title. Wanting to change to font 'better signature' I am using the Foster Design Template. Current coding as attached- what am I doing wrong?

Hi, I need to change the drop down color variation font on my shop page. What is custom code for this? Thank you

Montserrat is my choice for font branding, however my website title, which is my name, is not in that font. When I go into the back end of Squarespace, the title is in that font, and when I click on the title and click on the font choice drop down menu, Montserrat is selected. Could anybody explain why this is happening?

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!

I'd love some help with this one. A customer is experimenting with colour backgrounds for select pages and I need to change the font colour in this one page only: https://www.leadingedgedc.com/solutions-for-your-business Until they decide on their alternate block colours, I'm using this Custom CSS: /* COLOUR BACKGROUND FOR SOLUTIONS FOR YOUR BUSINESS */ #solutions-for-your-business { background-color: #1e3267; border-style: solid; border-color: #d7cbd7; border-width: 2px; h2{ color: white; } p { colour: white; } .summary-title { colour: white } } In the editor view, the background and H2 colours are appearing as per custom CSS, but the paragraph and Summary title text remain black instead of white. When I check the published page, none of the custom colours are showing. Have I got the CSS wrong? Appreciate the help.

Hey Guys! I've already used custom CSS to adjust the mobile fonts on my site, however, I can't figure out how to adjust the size of the product titles in mobile view. I'm using the Jaunt template. Any help would be great...thanks!

I’m looking for some help to change the mobile font size on a single page on a website. I have CSS code changing the font size for all mobile pages, which is perfect, but now I need to further modify the mobile font on a single page without impacting the font size at the other page breaks. I also don’t want the CSS to impact font size on any other page. Any help would be appreciated!

Hi! I'm trying to change the font when you click to enlarge a photo in a gallery. See attached screenshot. I added a custom font for Header 1 and that is the font showing up in the enlarged photo caption. The problem is that it is small and difficult to read. I'd like to change it to H2. Squarespace support could not help and suggested I try here. They said i may have to edit the custom CSS to change it, but when i looked, it seems like it would change the H1 font on the entire site. TLDR: So basically I need to change the font in the enlarged photo caption from H1 to H2. You can see here: www.iglamlab.com > About > Team > click to enlarge one of the photos in the gallery and see caption font.

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!