Search the Community

Hi Squarespace experts: I've been building a site in the Brine template, but have never been totally happy with the product detail page, so have built a test page to try a different layout. In this test page I have stacked images in the left column and product block in the right, along with text fields, spacers, etc, to achieve the desired layout. It's working well, for the most part. My hope is to hide the product pages and use this custom pages as my detail page once a shopper clicks on a product from my shop page. However, an issue is: when I add a product block to this page, the variant dropdown (in this case, "Size"), and its associated title looks bad - the font and dropdown design are not styled, nor is the "add to cart" button. They are missing the nice styling I had set with my actual product pages. It's as if the style settings are not translating to the product blocks. Does this make sense? Is there some CSS I could use to dress the product block variants and add to cart button?

Would like to upload my font that I've added Nexa, using CSS. I can't seem to get anything to respond to this command, not headers, paragraphs, or navigation. I'm using these codes: h1 {font-family: 'nexa-regular'; text-transform: capitalize; letter-spacing: .5px;} p {font-family: 'nexa-regular'; text-transform: capitalize; letter-spacing: .5px;} .main-nav a ('nexa-regular' !important; ) Is anyone able to help? thank you!

I designed a site last year with multiple navigation font colors by adding this code into the title of each navigation item so that it looked like the attached picture: <font color="0c9e9f">About</font> Squarespace has since updated, and the code no longer works. The navigation colors are set to white again. www.ralphfarris.com Does anyone have a suggestion to fix this? I would really appreciate it!

Hello! I am looking for a bit of CSS code that allows me to repurpose the Italic styling in Brine. I want it to not make the text italic but change the color to #428BCA instead. This could be done in Markdown but I would rather use the UI buttons within the text styling window to change specific words, not a whole paragraph.

I'm trying to change the title font of the Image Block text. I used this code below and the font has already been uploaded but it's not working. Help? Image Block Overlap Custom Font.sqs-block-image .design-overlap-poster .image-title p { font-family: "ABHAYA LIBRE" !important }

https://megalodon-rose-khl5.squarespace.com Im trying to change the font style within the footer but think it would need to have custom CSS any advice?

Hi, I'm using the Juniper template on 7.1 I have successfully customised the default font for the site however this hasn't updated the header font or button font styles, and I can't seem to identify the class names to add a custom font. Would someone be able to help please? I haven't launched the site yet to be able to provide a URL... Many thanks

I'd like to resize my site's font based on the window size. I'm using Squarespace 7.1, where instead of the text resizing smaller to fit the screen, it first wraps around to a new line before the screen is sufficiently small that the text moves from a horizontal to a vertical layout. I contacted Squarespace support, who told me there is no build-in way to do this, and that I should ask around on the forums. So here I am. Hello! 👋 The provided images are what resizing the screen looks like currently.

I've got a custom font that use on my site via an external style sheet. It works really well on desktop and mobile, but not at all on a tablet sized screen. I've tried adding the font through a media query and that makes no difference. Not sure how else to troubleshoot this one anymore.

Hi, anybody van help? the link myfonts is providing to use in the css to the myfonts server seems to be wrong for the squarespace i figured out with the dev tools from google that this must be problem why webfonts do not show up! it cannot load the fonts..it says :"wrong href " this is the link from my css file @import url("//hello.myfonts.net/count/3ad6aa“); you have an idea what to change..??

I'm fairly new to CSS and I'm trying to figure out how to add custom font for the navigation and also the 'normal' font in the text box. Can anyone help?? This is what I have so far.... Also... what is the 'p' font? //ADDING HAVELOCK FONTS// @font-face { font-family: 'HAVELOCK LIGHT'; src: url('https://static1.squarespace.com/static/5e18e998a6a8c14066a834e0/t/5e190c7112be5b2164a3f91c/1578699889315/3AD48F_3_0.woff'); } @font-face { font-family: 'HAVELOCK MEDIUM'; src: url('https://static1.squarespace.com/static/5e18e998a6a8c14066a834e0/t/5e190e2812be5b2164a4282d/1578700328356/3AD48F_4_0.ttf'); } @font-face { font-family: 'HAVELOCK REGULAR'; src: url('https://static1.squarespace.com/static/5e18e998a6a8c14066a834e0/t/5e190d344c275445aaacdee3/1578700084635/3AD48F_6_0.woff'); } //ASSIGN FONTS// h1 {font-family: 'HAVELOCK LIGHT';} h2 {font-family: 'HAVELOCK MEDIUM';} h3 {font-family: 'HAVELOCK REGULAR';}

Please check mobil site: www.victoriaalstrup.com. Password: victoria On desktop the overlay image fonts on the front page looks perfect, but it won't adjust correctly on the mobile version. Any tips?

Is it possible to define new paragraph styles in addition to the default H1, H2, H3, etc?

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?

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?

Hi, my website is: https://www.cottagecc.com/home I'm trying to make the caption overlay on the homepage image (and site wide) to be a font that I've already imported from google fonts. thank you!

Hi!! I was wondering how I can target the header overlay text to be a different coloured font on one of my pages. I also want to get rid of the shadow behind the text but only for this page. The section is the "What We Do" index page of my homepage. I want the font to be #hsl(195, 7%, 23%). Here is the URL: https://penguin-roadrunner-4c8m.squarespace.com/ and password: Skyfall77

Hi, I am using Om Template for my website. I have bought a font that I would like to use for my site title. I have looked through the online help and am still stuck with this. I know I am on the right path because using css code I am able to change the Heading 1 or Heading 2 or Heading 3 to use this custom font.... but I just cannot figure out how to change the site title. The custom font is not available in the list of fonts available under Site Styles | Typogrpahy | Site Title. So I have added following code under Design | Custom CSS. Where am I going wrong? Any help would be much appreciated. You can view the website on : https://interiordesignstein.squarespace.com/ // Adding Leyton Font @font-face { font-family: 'Leyton'; src: url(//static1.squarespace.com/static/5d71b8d9e71af8000103a6ea/t/5e0d887f014e1a25d2e580a0/1577945215697/Leyton-Regular.otf); } //change the heading 1 font h1 { font-family: "Leyton"; } //site title does not want to change?? header h1.site-title { font-family: "Leyton"; }

I want to change the font in my header navigation. I'm able to do it to each link that is a direct link (i.e., I click on it and it takes me directly to a page), but the items that are drop-down menus on hover don't change. I'm using this code: #headerNav nav a { font-family: 'AspiraWide' !important; } The website is at www.middle.st – It's subtle, but you can see the "Events" and "Contact Us" links are a slightly different font. Thanks!

Wondering if someone could help me with custom CSS code to change my avenue sites mobile navigation bar font to a custom font. Already using a custom font for the rest of the site just cant get it to apply to mobile nav. As a bonus if I could get the CSS to change the text of my mobile navigation from "menu" to something else that would be great. Thanks!

If you want to use custom font for Navigation, just copy - paste the following codes. Add code to Home > Design > Custom CSS 92 Templates Navigation Link Color - Hover - Active Color Avenue @font-face { font-family: your-font-name; src: url(enter your font name url here); } #topNav nav ul li a { font-family: your-font-name; } Aviator @font-face { font-family: your-font-name; src: url(enter your font name url here); } nav#main-navigation ul li a { font-family: your-font-name; } Bedford Template Family Include: Anya, Bedford, Bryant, Hayden, Bedford @font-face { font-family: your-font-name; src: url(enter your font name url here); } #mainNavigation div a { font-family: your-font-name; } Brine Template Family Include: Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Custom Template, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West, Brine. @font-face { font-family: your-font-name; src: url(enter your font name url here); } .Header-nav-item { font-family: your-font-name; } Farro Include: Farro, Haute @font-face { font-family: your-font-name; src: url(enter your font name url here); } .Header-nav-item { font-family: your-font-name; } Five @font-face { font-family: your-font-name; src: url(enter your font name url here); } nav#main-navigation ul li a { font-family: your-font-name; } Flatiron @font-face { font-family: your-font-name; src: url(enter your font name url here); } ul#nav li a { font-family: your-font-name; } Forte @font-face { font-family: your-font-name; src: url(enter your font name url here); } #topNav ul li a span { font-family: your-font-name; } Ishimoto @font-face { font-family: your-font-name; src: url(enter your font name url here); } #topNav #nav li a { font-family: your-font-name; } Momentum @font-face { font-family: your-font-name; src: url(enter your font name url here); } #topNav ul li a { font-family: your-font-name; } Montauk Template Family Include: Julia, Kent, Montauk, OM @font-face { font-family: your-font-name; src: url(enter your font name url here); } #topNav ul li a { font-family: your-font-name; } Native @font-face { font-family: your-font-name; src: url(enter your font name url here); } #navBlock ul li a { font-family: your-font-name; } Pacific Template Family Include: Bryler, Charlotte, Fulton, Horizon, Naomi, Pacific @font-face { font-family: your-font-name; src: url(enter your font name url here); } #mainNavigation div a { font-family: your-font-name; } Skye Template Family Include: Foundry, Indigo, Ready, Skye, Tudor @font-face { font-family: your-font-name; src: url(enter your font name url here); } .nav-blocks-wrapper div a span { font-family: your-font-name; } Tremont Template Family Include: Camino, Carson, Henson, Tremont @font-face { font-family: your-font-name; src: url(enter your font name url here); } #mainNavigation div a span { font-family: your-font-name; } Wells @font-face { font-family: your-font-name; src: url(enter your font name url here); } div#topNav ul li a { font-family: your-font-name; } Wexley @font-face { font-family: your-font-name; src: url(enter your font name url here); } div#topNav ul li a { font-family: your-font-name; } York Template Family Include: Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, York @font-face { font-family: your-font-name; src: url(enter your font name url here); } .site-navigation div a span { font-family: your-font-name; } Squarespace 7.1 Include: Novo, Pazari, Nolan, Utica, Cami, Matsuya, Nevins, Kester, Gates, Zion, Classon, Hawley, Suhama, Elliott, Otto, Tepito, Balboa, Beaumont, Quincy, Talva, Minetta, Falodu, Hester, Crosby, Ventura, Maru, Tresoire, Almar, Alameda, Patil, Stanton, Paloma, Fillmore, Palmera, Souto, Brower, Merida, Grove, Harman, Rivoli, Noll, Bergen, Degraw, Corrigan, Sackett, Lakshi, Pulaski, Suhama, Cailles, Colima, Barbosa, Clune, Irving, Suffolk, Clarkson, Lusaka, Bailard, Malone, Roseti, Euclid, Carmine, Wycoff, Harbor, Ocotillo, Fayette, Roseti, Dario, Soria, Morena, Rey, Lenoix, Bleecker, Vandam, Cruz, Kitui, Waverly, Vance, Orina, Chotto, Auburn, Juniper, Palmer, Atlantic, Iduma, Pine, Eldridge, Pulsaki, Amal, Suhama, Hart, Carroll, Noll, Hidano, Palermo, Cailles, Archer, Kearny, Sellwood, Essex, Mason, Gramercy Studio, Cole, Devoe, Randi, Zorayda, Manor Studios, Grant, Toledo, Hoyd, Troutman, Tantillo, Maqueda, Hemlock, Bogart, Florence @font-face { font-family: your-font-name; src: url(enter your font name url here); } .Header-nav-item a { font-family: your-font-name; } Made by Tuan

Hello! I am using a simple Squarespace template. I would like for the type in the "work" page to rollover to white because when the image shows it makes the type impossible to read. Please see the animation I posted. Thank you SquarespaceHelp.mp4

Hi there. I'm working on a bilingual text on a website. For this I created an English text style (h3) and a Spanish one (h4) with the same specifications as h3, except for a color change, and insert it on the page with a code block. h4 has been set to match the size of h3 on full width but for obvious reasons it won't resize on smaller screen sizes. Any idea how to solve this? Here's a link to the page. Thanks!

Hi community, I'm using a custom font and I've been able to change the h1,h2,.. styles into the correct font with CSS...but I can't do the same for the product titles. I need urgent help. Thanks in advance!!

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!