Search the Community

I've entered a custom font in CSS and it is displaying correctly on my laptop. But when I viewed the site on my phone it didn't show the custom font. Squarespace help team couldn't see the custom font either. Can someone please help! ? Thanks.

Any ideas? thanks a lot!

Hi,I 'm a total beginner in CSS and can't seem to find a way to find the right code to customise my shop product pages fonts (even though I loaded custom fonts and manage to customise fonts on other pages of my website). I need your help please! I am using the Rally template and provided with a screenshot where all fonts that I would like to customise are circled in red. How to customise what's apparently called the product excerpt font (product description)? How to customise the purchase button font (and all other buttons in the shop)? How to customise the shop navigation font? And as a bonus, how to customise the announcement bar font without impacting my main navigation? Thanks a lot! Damien

Hello, I use a Viktor Script font for my page content titles 2. My shopping cart page displays a viktor script in title but in capital letters.How do I switch it to lowercase? Bonjour, j'utilise une police Viktor Script pour mes titres 2 de contenu de page. Ma page panier affiche en titre une viktor script mais en majuscule.Comment faire pour la passer en minuscule ??

Why are the fonts specified in the CSS code below not appearing on screen? I'm trying implement my code on an unlinked page in the Brine template. I've inserted the CSS code via Design-->Custom Code. Only Freight Text is appearing, not the other fonts. Project HTML <div class="tt-canvas-inner-21813"> <span class="tt-layer tt-21813-layer-1">LEGALITIES</span> <span class="tt-layer tt-21813-layer-2">This page was last updated in </span> <span class="tt-layer tt-21813-layer-3">JULY</span> <span class="tt-layer tt-21813-layer-4">2019</span> </div> Project CSS div.tt-canvas-21813 { padding: 2em 0; margin: 0 auto; background-color: #fff;} div.tt-canvas-inner-21813 { position: relative; margin: 0 auto; width: 811px; height: 192px;} span.tt-layer { position: absolute; display: inline-block; white-space: normal; line-height: 1em; transform-origin: 50% 50%;} span.tt-21813-layer-1 { border-color: #fff; border-radius: 0em; border-width: 0em; color: #242424; font-family: freight-neo-pro; font-size: 3.6em; font-weight: 600; padding: 0em; white-space: nowrap; overflow: visible; top: 19px; left: 0; width: 282px; height: 57px; z-index: 1000;} span.tt-21813-layer-2 { border-color: #fff; border-radius: 0em; border-width: 0em; color: #@$@$@$; font-family: freight-text-pro; font-size: 1.8em; padding: 0em; white-space: nowrap; overflow: visible; top: 106px; left: 3px; width: 351px; height: 28px; z-index: 1000;} span.tt-21813-layer-3 { border-color: #fff; border-radius: 0em; border-width: 0em; color: #c1c1c1; font-family: freight-text-pro; font-size: 3em; font-weight: 500; letter-spacing: 0.05em; padding: 0em; white-space: nowrap; overflow: visible; top: 94px; left: 348px; width: 118px; height: 48px; z-index: 1000; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg);} span.tt-21813-layer-4 { border-color: #fff; border-radius: 0em; border-width: 0em; color: #c1c1c1; font-family: freight-text-pro; font-size: 12em; font-weight: 500; letter-spacing: -0.025em; padding: 0em; white-space: nowrap; overflow: visible; top: 0; left: 462px; width: 349px; height: 192px; z-index: 1000; -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg);}

I am using the Jasper Template on the following site: www.mySC3limestone.org. The gallery thumbnails are used as buttons for people to click, but for some reason they slowly fade in, as opposed to images that are on the page that load automatically. I have to use the gallery thumbnails because then I can display it on mobile as 2 wide, whereas if I just use images, it will stack the images, which I don't want. Does anyone know if there's a way to stop the gallery thumbnails from fading in and instead just appearing automatically?

Hello, I am using html code in markdown: <span style="color:#fff; font-family: 'Bebas Neue'; font-size: 4em;">INSPIRATION DAY</span> I want to apply Bebas Neue font style (which is included in the font family) but it does not apply to the text... Thanks for your help! Ohyoon

I have found this page , which talks about adding more font styles by adding h4-h6 headers through CSS (I used the answer provided by Dan).However, the answer doesn't seem to include a solution for how to edit the font style. For example, Proxima Nova is my font, and I want my font style to be Proxima Nova Light. Does anyone know what I can add to the CSS to get this done?

How to change font type and colour for few words in the body text? Thank you.

Hello! I am trying to change the font color of everything on the turquoise section where my "services," "amenities" and "investment" are on my site. Could someone tell me how I could go about that because everything I've tried isn't working? Thanks!

I've read several threads asking the same question and tested several css codes that were suggested. None of them worked. I just want to make the font size of the "normal" text in my footer smaller- maybe 9 or 10px. I'm using the basil template. Here's what I've tried thus far: #footer { font-size: 0.75em; } #footer { p {font-size: 10px} h1 {font-size: 14px} h2 {font-size: 12px} h3 {font-size: 10px} a {font-size: 10px} } #footer { p {font-size: 10px !important} h1 {font-size: 14px !important} h2 {font-size: 12px !important} h3 {font-size: 10px !important} a {font-size: 10px !important} } Thanks for your solutions!

I've about got my website the way I like, using the Aviator template, but on a mobile phone, the font size, which is quite comfortable on a desktop monitor, is kind of huge. As the mobile styles already change many things, I figure there might be some way of saying, "Do all the stuff you always do for mobile devices, but make all the fonts 70% of the regular mobile size, please." For reference, my website, on a page other than the Info Page so you can see the problem: http://www.withinsight-therapy.com/what-we-offer/

Hi I'm building a portfolio site, using the Wexley template. I've bought a font online that I'd like to use consistently through my website. I was wondering if anyone knows the css code that would allow me to do this? I have extremely little experience with css code, so please be specific as possible. Thanks!Stephen

I'd like to use a Montserrat light in my nav, in style editor, the only weights listed as options are 400 and 700. How would I address the nav in the css to adjust the font weight? Thanks!

I want to fix my header so that as I stroll down it can still be visible but I know nothing about code. I have the rally template. Please help, I'm so lost.

Is it possible to install or use Font Awesome on my Squarespace site?

Hello, My website is BigInScience.com, and I'd like to make H2 & H3 heading hyperlinks the same in appearance as regular text hyperlinks. Specifically, my links appear blue (#0c08c1) and turn orange (#fc8002) when hovered over and active. I'd like H2 & H3 heading hyperlinks to appears the same. Here are a couple of CSS codes I've tried unsuccessfully: // Attempt 1 h2 a:link {color:#0c08c1;} h2 a:visited {color:#0c08c1;} h2 a:hover {color:#fc8002;} h2 a:active {color:#fc8002;} h3 a:link {color:#0c08c1;} h3 a:visited {color:#0c08c1;} h3 a:hover {color:#fc8002;} h3 a:active {color:#fc8002;} //Attempt 2 #content h2 a:link {color:#0c08c1;} #content h2 a:visited {color:#0c08c1;} #content h2 a:hover {color:#fc8002;} #content h2 a:active {color:#fc8002;} #content h3 a:link {color:#0c08c1;} #content h3 a:visited {color:#0c08c1;} #content h3 a:hover {color:#fc8002;} #content h3 a:active {color:#fc8002;} Any help would be much appreciated! Thank you, Brian

I'm working with a lot of text blocks on my site and I'm wondering if I can add more drop-down options to the text formatting bar. By default there are: Normal, Heading 1, Heading 2, Heading 3, Quote, Code Can I add custom CSS to create new options here, or do I have to add code blocks to format the text? If I need to add a code block to do it, how?

How do I change the font size used in the caption of image blocks for Beatrice template? Do I need to inject the same code on each page I use the image block on?

I am looking to change the font of my navigation bar and my page title. I have been searching on the correct CSS coding to use, but none of them seem to work. I am using the Five template, and would appreciate any help. Here is my website: https://www.thenaturalwanderer.com/ and here is what I have for the custom font I would like to change it to (and is working on other parts of my website)@font-face { font-family: 'SeaBreeze'; src: url('//static1.squarespace.com/static/59377bf2d482e9936343333b/t/595eefae72af6564b208c050/1499393967009/SeaBreeze-Regular.woff') format('woff'); font-weight: normal; font-style: normal;} Any help would be appreciated.

Hello! So this should be really quite simple but I just can't to seem to figure it out. I'm currently putting together my site in a trial period and planning to go live with it over the weekend. https://forceproductions.squarespace.com is the site. As you can see I've managed to get ALL of my header fonts to be diablo_h except for the main title - which is the most important! Firstly, I know nothing about CSS. I've managed to read through a ton of forums to figure out my way a bit, but this is the code I've injected so far: @font-face { font-family: 'diablo_h'; src: url('https://static1.squarespace.com/static/55d0da93e4b0ebe2dff29cd3/t/55d2c187e4b0a6ed876846ba/1439875463298/diablo_h.ttf'),; font-weight: 400; } h1, h2, h3, h4, h5, h6 { font-family: 'diablo_h'; font-weight: 400; } ALL THAT ABOVE IS WORKING I cannot for the life of me figure out how to make the main title text the same font, diablo_h. I have found that .page-title{display:none;} removes the title, but I can't seem to make it change the font. I also tried .homepage #siteTitle {font-family: 'diablo_h'; src: url('https://static1.squarespace.com/static/55d0da93e4b0ebe2dff29cd3/t/55d2c187e4b0a6ed876846ba/1439875463298/diablo_h.ttf'),; font-weight: 400} but that didn't do anything... Please help!

Hey! I am trying to upload a custom font to our site. This is the custom css we have put in, but it is not showing up. Any help? @font-face { font-family: 'cheddarjack'; src: url('https://static1.squarespace.com/static/58d94a3b6b8f5bf8254dece2/t/598f6ce64c0dbfafe1ecf031/1502571750536/cheddar+jack.ttf');}h1 { font-family: cheddarjack; font-size: 30px; font-weight: bold; color: #444444;}

I don't see this option listed under the style options for the Dovetail Template. I'd like to make the font match the rest of the site. See an example here: http://halberstadtortho.com/rockville-centre-orthodontist Thanks!

How can I centre captions (rather than justify left) underneath an image/image block?Am using the Supply template. Thanks!

I've followed the steps on this helpful video but now how do I actually use the font I've added? It's not in the list of fonts? link text