Search the Community

Hi there, The custom CSS font is not working for our business website. Any advice would be great - I wondered if it's because we haven't hooked the site up to a live domain yet? Thank you!

Hi, I'm struggling to get my custom font CSS to apply to both the price and category listings on the product page: https://fox-beagle-3wxe.squarespace.com/pre-orders-shop pw: bostock Any help would be appreciated! Thanks, Jordan

So I want the font size smaller on mobile. www.starcruiter.no >>>select 'Konsulentportaler'

Hi there! Can you please share how I would be able to change the font color in a tag cloud in Bedford? Thanks so much!

Site URL: http://bjornsorensen.com See the portfolio sectionat the page bottom. I want the overlay text as 2 separate lines. First line with bold weight 30px and second line with regular weight 20px. How can I do this?

Hi How do I make the caption style on this page: https://smilodon-ocelot-my5f.squarespace.com/gallery?itemId=icgc6tp80ggn34v5qexq1xigrts8va (Pass: Hello) match the caption style on this page: https://www.mattportch.com/kalah (Below images - the top one match the bottom one)

Hi, We can't get our custom fonts to work beyond the local machine! We have tried everything incl preloading them as well as having the woff2/woff on the css and nothing seems to work. See the current approach below! anything you can do to help would be great. https://domainewolf.squarespace.com font-face{ font-family: 'Adelon Serial'; src: url(https://static1.squarespace.com/static/633312b161044b5abdf7c2ce/t/637fc52921a66323e56ff0b9/1669317929824/AdelonSerial.woff2) format('woff2'); } font-face{ font-family:'Material Symbols Outlined'; src: url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,100,0,200); } font-face { font-family: 'Panama'; src: url(https://static1.squarespace.com/static/633312b161044b5abdf7c2ce/t/633314edb2de5c788ee26bcc/1664292077908/panama-webfont.woff2) format('woff2'); } font-face { font-family: 'YoungBaroqueStd'; src: url(https://static1.squarespace.com/static/633312b161044b5abdf7c2ce/t/6333150ec7dd864453b78aab/1664292110803/YoungBaroqueStd.woff2) format('woff2'); } p{ font-family:'Panama'; } .cart-row-desc a{ font-family: 'Adelon Serial' !important; } .current-language{font-family:'Panama';} h1, h2, h3 { font-family: 'Adelon Serial' !important; }

Hello everyone, After installing and trying to use a custom font, the Bold selector does not work properly. The amount of Bold it adds to the font is minimal. The first screenshot shows how the bold selector behaves when using the font through google fonts from the "Site Styles". The second screenshot shows how the bold selector behaves using the same font but installed by me. The font installed is Poppins Light. This is the custom-css code I'm using: h3 { font-family: 'Poppins-300'; letter-spacing: 0.02em; font-size: 1.8rem; }

Hi, I'm relative coding novice trying to work around the GDPR / Google Fonts issue by uploading fonts to Squarespace. CSS as follows - @font-face { font-family: 'Bebas Neue', sans-serif; src: url('https://static1.squarespace.com/static/5a26b704edaed8708f8a1b20/t/637dee7c40e9637fe26f68a8/1669197436822/BebasNeue-Regular.ttf'); } h1, h2 { font-family: 'Bebas Neue', sans-serif; } This works fine for me on Chrome and Firefox with the custom fonts, but Safari goes to the default font. Confusingly, although this works for my Chrome, my client's Chrome also goes to the default font. Any help would be greatly appreciated as my brain is melting.

Hi there! I'm trying to edit the site title of charleskyouel.com. I'd like to edit the type weight in the title — similar to the attached — with CSS, and I'm stumped. Help!

Custom fonts work on desktop. They also work in browser Inspector, mobile view. BUT...they do not work on actual mobile devices. Here is my code. Help! 🙂 URL: https://www.breakthelink.org/ @font-face{ font-family: 'Nexa Light'; src: url ('https://static1.squarespace.com/static/62c4c46ef88c2c6a02afa70f/t/62eaa735ea232972ef2dc4a4/1659545397369/NexaTextDemo-Light.woff'); font-weight: regular; } h1 { font-family: 'Nexa Light'; } @font-face{ font-family: 'Playfair Display'; src: url ('https://static1.squarespace.com/static/62c4c46ef88c2c6a02afa70f/t/62e69ebf7096f8757c4b57a8/1659281087510/PlayfairDisplay-VariableFont_wght.ttf'); font-weight: regular; } h2 { font-family: 'Playfair Display'; }

We've just been contacted by few EU client that received letters from shady law firms pushing for a payment of around $200 or more to settle the issue. At the beginning of 2022, Germany ruled the use of Google Fonts as a violation of the GDPR. So far, I'm only aware of such letters in Germany and Austria yet but I believe this could happen in any EU country. I'm happy to open a discussion on this with best pratices. (inviting @paul2009 @KwameAndCo @colin.irwin @christyprice ....)I'm still not sure if replacing all fonts will 100% cut the bridge to a Google Server, but that what this post is here for, while I'm hoping to get a statement from Squarespace. Here's a related article by @Centerliner that becomes more and more relevant Here is a great, detailed German article: https://calysto-marketing.at/dsgvo/abmahnungen-wegen-nutzung-von-google-fonts-durch-rechtsanwalt-mag-hohenecker-im-namen-von-frau-eva-zajaczkowska-21-8-2022/?moderation-hash=2584c485cf8b3c3908d420c174dfa888&unapproved=1&utm_source=pocket_mylist While right adjustment to your privacy settings can cover this as well, here is a quick tutorial ______________ QUICK TUTORIAL how to install a custom font on your website (instead of loading it from a third party server - this is also the same procedure if a client asks you to use their custom font on the website) set all fonts to a system font (like Arial) - thanks to @Selistina for the comment 🙂 Get your font files ready (I mostly use .otf or .ttf as they work very well) NOTE: if you want have "light" and "bold" or "strong" you need to have an individual font file for that go to DESIGN > Custom CS At the bottom you'll find "MANAGE CUSTOM FILES" Just upload the font files When you click one of your uploaded fonts it will paste the file path into your css (make sure this doesn't mess with your existing CSS Example: https://static1.squarespace.com/static/624ac8c48e016a33e668e7db/t/6257cda47c57db4f2bb5146f/1649921445359/MessinaSans-Bold.ttf Save those file links for later Copy paste this CSS and give your uploaded fonts a NAME @font-face { font-family: 'SEMIBOLD'; src: url('https://static1.squarespace.com/static/624ac8c48e016a33e668e7db/t/6257ceb19301a214871b3282/1649921713264/MessinaSans-SemiBold.ttf'); } @font-face { font-family: 'REGULAR'; src: url('https://static1.squarespace.com/static/624ac8c48e016a33e668e7db/t/6257ce68e86b157650ac08a1/1649921641106/MessinaSans-Regular.ttf'); } @font-face { font-family: 'LIGHT'; src: url('https://static1.squarespace.com/static/624ac8c48e016a33e668e7db/t/6257cdbe9301a214871b2334/1649921471023/MessinaSans-Light.ttf'); } Now you can individually apply those fonts to your website like this h1, h2, h3 {font-family: 'SEMIBOLD'} h4 {font-family: 'LIGHT'} h4 strong {font-family: 'SEMIBOLD'} p {font-family: 'LIGHT'} .Header-nav {font-family: 'SEMIBOLD'} .summary-title {font-family: 'SEMIBOLD'} .summary-read-more-link {font-family: 'SEMIBOLD'} Note: It's also possible to apply font weight settings (h4 is the light one and h4 strong is bold ) Please be aware that there are more font cases with your website ( e.g. .blog-title ... ) to this is not covering all of them ______________

I'm using Neue Haas Grotesk Display, a Squarespace font for the paragraph font. It looks fine on the draft build site in Squarespace (Chrome), but the site replaces the font with an ugly serif font on other browsers such as Safari, Firefox, etc. Any ideas why or how I can be sure these sites fonts display properly across all major browsers? https://red-falcon-h3mg.squarespace.com/ PW ckpi

Site URL: https://www.fincafoxcoffee.com Hello, I modified my CSS to accommodate a custom font and it is not showing up on the mobile version. Here's the custom CSS that's already there: h2.nested-category-title.nested-category-title-padding { text-align: center !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } h2.nested-category-title.nested-category-title-padding:after { display: none !important; } hr { padding: .5px 0 .5px 0; } @media screen and ( min-width: 576px ) { .products.collection-content-wrapper .nested-category-children::after { all: unset; } span.sqs-cart-quantity { font-weight: bold; } @font-face { font-family: 'WildenRegular'; src: url('https://static1.squarespace.com/static/62cb76820488af55dbf08854/t/6302e8e594706700782501e8/1661135077160/WildenRegular.woff'); } h1 {font-family: 'WildenRegular';} h2 {font-family: 'WildenRegular';} h3 {font-family: 'WildenRegular';} h4 {font-family: 'WildenRegular';} p1 {font-family: 'WildenRegular';} p2 {font-family: 'WildenRegular';} p3 {font-family: 'WildenRegular';} p4 {font-family: 'WildenRegular';} } .collection-type-products .ProductItem-details h1.ProductItem-details-title, .ProductItem .ProductItem-details .product-price { font-family: "WildenRegular"; } .ProductItem-nav { font-family: "WildenRegular"; } // Site Title // .header-title-text a { font-family: WildenRegular !important; } // Site Navigation // .header-nav-item a { font-family: WildenRegular !important; } // Button // .header-actions-action .btn { font-family: WildenRegular !important; } // Announcement Bar // .sqs-announcement-bar-url a { font-family: WildenRegular !important; } // Newsletter Form Title // .newsletter-form-header-title { font-family: WildenRegular !important; } /* burger lines height */ .burger-inner>div { height: 3px !important; } /* cart */ svg.icon.icon--cart { stroke-width: 2px; } span.sqs-cart-quantity { font-weight: 500; } /* Sold out */ .product-mark.sold-out { color: #FF765F; font-weight: 700 !important; } @font-face {font-family:FontName; src: url(https://static1.squarespace.com/static/62cb76820488af55dbf08854/t/6302e8e594706700782501e8/1661135077160/WildenRegular.woffurl-here)} /*Product Image Fix*/ .products.collection-content-wrapper .ProductItem-gallery-slides-item-image { object-fit: contain !important; object-position: top; width: 100% !important; height: 100% !important; position: static !important; } .gallery-lightbox-item img { object-fit: contain !important; object-position: middle; width: 100% !important; height: 100% !important; position: static !important; } .grid-item img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: middle; } /*END Product Image Fix*/

When I'm editing my site, the custom font displays successfully. When I publish the site + view it as a user, the font displays something different. Only in editing mode, it displays the custom font. I've tried a few codes though nothing is working when viewing the site as a user. Please assist. @font-face { font-family: 'Bruney'; src: url('https://static1.squarespace.com/static/63486c65082abb3700d32738/t/63486c91082abb3700d32fbf/1661645021534/Bruney.ttf') format('truetype'); } h1 { font-family: 'Bruney'; text-transform: none;}

Hello, I am trying for some time now to change the colour of the font in my summary block at my home page but I cannot. This blue color is very distracting (see articles, reviews). I am not sure how to do it. I have restored to the default themes more than once, tried to edit the color manually, but nothing happens - it does not even change color. I have repeatedly searched but nothing! I think I might be missing something! Same when I put a link in the text - the color is orange and cannot change it. Here is my website. Any help would be very appreciated! www.filmmining101.com

The font color in the CMS editor used to have a default dark/black color. Somehow it turned to white next time I visited, I don't know what change I made to have this effect. When I inspect this page, I get this weird class that was not written in our code base to create this website. When I edit the <p> tag in the site code base and in the CMS 'Custom CSS' to have a different color, it only applies to the front-end and not the editor. Where can I find the code to edit the styling for the editor? Can anybody advise?

Hello! I've successfully added custom fonts to my website headers and body text, but I'm running into trouble with the forms. I managed to make the text for the fields of First & Last Name to the correct font, but the email and message fields are not. The descriptors for each form field is also not customized. I included a screenshot. My code is: .contact-form .contact-form-header-title { font-family: 'gingko';} .form-wrapper .field-list .field .caption .field-element { font-family: 'phaedra';} Please let me know what I'm missing!

Hi everyone. I'd supply a link to the site but i'm currently trying to figure out a student discount so my site isn't live yet. I'm using the nova theme and trying to add custom fonts to the site. I've already gone into custom css and made it work on the project pages (image 2). However, i'm having trouble getting to work on the homepage when you hover over the projects and it shows the name. In design > fonts that area is shown as "Title", I am just not sure how to refer to that specifically in the CSS if anyone could help. I saw on another post someone reccomending using portfolio-title { font-family: 'x'; } and title { font-family: 'x'; } but those did not work. I am new to CSS so sorry if this is a basic question. Thanks for any help!

Hello! I want to change the font for the content titles on a carousel list. For example, I want to change the font for the "November 30" or "February, 2022". I want to change this font without affecting global setting. This is currently my header font, and I want it to remain my header font site-wide, but on this particular place I'd like it to be less of a bold and poppy font. We currently have the personal plan, is there a way to just change this font without coding? Or do I need to go in and change the style code? We do plan to upgrade to a business plan but later. This is the site: https://ronburkhardt.squarespace.com/ The access password is: notism

Site URL: https://turkey-emu-sd4a.squarespace.com/ Hi all, I've added Muli and Lato as custom fonts to my site. Lato is working well but on some browsers/devices another serif font shows instead of Muli for paragraphs. My code has worked fine for another site, also using the 7.1 template, so I'm baffled. Any ideas on how to troubleshoot would be very welcome? My custom code is below and I've uploaded a pic to show my fonts have been added as custom files. @font-face { font-family: 'Muli'; src: url(https://static1.squarespace.com/static/5efccf013260ec23a0736abe/t/5efcd5307e7bab5539c1e493/1593627952821/Muli-Regular.ttf); } @font-face { font-family: 'Lato'; src: url(https://static1.squarespace.com/static/5efccf013260ec23a0736abe/t/5efcd4e8603e98547506a5bd/1593627880622/Lato-Regular.ttf); } h1 { font-family: 'Lato'; } h2 { font-family: 'Lato'; } h3 { font-family: 'Lato'; } h4 { font-family: 'Muli'; } p { font-family: 'Muli'; }

Hi everyone I'm not sure if I'm missing something, but I can't work out how to change the size of the section title in my testimonial slider (the bit that says Testimonials). Is there a way to do this? Thanks! Heather Password: Earlydays

Hi! I want to change the header font on one page of my site only. But I am looking to change it to a custom font or font that is not native to squarespace. How do I do that?

I am in version 7.1 and am trying to change my header/title fonts to be an otf font that I downloaded. I found directions online but it didn't change on my site after I followed them. Does anyone know how to do this?