Search the Community

Site URL: http://basehabitation.squarespace.com Hello, I have installed my custom font and have inserted the CSS to make it work on the website. It works fine on my laptop but on mobile and any other device, the font does not load, it is replaced by something else. Here is the code I used: font-face { font-family: 'JUNICODE-BOLD'; src: url('https://static1.squarespace.com/static/62f6601885a37304312048c7/t/62f663650d28410c7e01d7c9/1660314469574/Junicode-Bold.ttf'); } h1 { font-family: 'JUNICODE-BOLD'; } h2 { font-family: 'JUNICODE-BOLD'; } h3 { font-family: 'AILERON-ITALIC'; } h4 { font-family: 'JUNICODE-BOLD'; } .header-title-text { font-family: 'AILERON'; } .sqsrte-large { font-family: 'JUNICODE-BOLD'; } p { font-family: 'AILERON'; } .sqsrte-small { font-family: 'AILERON'; } Any help would be greatly appreciated!

I am struggling to find the correct code to change the font for the titles of the projects in my portfolio and also in the navigation to 'next project' at the bottom of a project page. Thank you

Site URL: https://www.returnermagazine.com/ Hi, my custom font isn't showing up in the mobile version of my website. I would like for it to apply on any phone iPhone/Android, etc. Can anyone help? Thank you so much in advance! Here's the custom CSS I'm using right now: @font-face { font-family: 'CatchyMager'; src: url('https://static1.squarespace.com/static/62e2f3be41c8034375426c0b/t/62f924cdd583b67a0a6d077e/1660495054237/CatchyMager-Normal.ttf'); font-weight: normal; font-style: normal; } .has-site-title .Header-branding { font-family: "CatchyMager"; }

Hi, When using this font, the letter is J is getting cut off. I tried changing the font size but no difference so I think it goes outside of the margin. Its fine on edit mode but is off cut when I preview the site. How can I fix it ? Thanks https://tlcdesign-jessicademo.squarespace.com/introduction Password: jessica

Hi there, I've uploaded custom fonts and for some reason they seem to be underlined and hyperlinked. Not sure how to fix this!

Site URL: https://grape-semicircle-m6yz.squarespace.com/config/pages Image Header Adding in Hyperlink with Unique Design to this page I'd like for my headers on this page to keep the color and design they currently have, but I would like to add hyperlinks to them. The design format for the rest of the website turns them black and adds an underline. For this page only i'd like for them to remain the same color (#d65124) and have no underline. Version 7.0, Brine Family, Custom Template. I have tried a bunch of custom CSS that other videos have recommended and have not been able to figure this one out with my limited website knowledge - please haaalp!

Hi I am having issues with my squarespace site / squarespace in general - note i have tried this on multiple squarespace sites of mine but I'm having the same issue. I note that the fonts were working last night and now they are not. I have custom fonts in OTF format which I have uploaded the custom CSS page. I have used the following code: @font-face { font-family: AAA; src: url(https://static1.squarespace.com/static/62f0815356f60d45a8bd7d70/t/62f2fa9009ae867245600778/1660091024525/Recoleta-RegularDEMO.otf); } h2 { font-family: 'AAA'; } @font-face { font-family: BBB; src: url(https://static1.squarespace.com/static/62f0815356f60d45a8bd7d70/t/62f32329170496483655ff1c/1660101417637/Pacifico-Regular.ttf); } h1 { font-family: 'BBB'!important; } My issue is the custom font is not being correctly recognized by squarespace and is just replacing the text with a general serif font. Font AAA is meant to look like this: Font BBB is meant to look like this: However they are not showing up, as seen in the following list of the headers and paragraph samples form my website. Please help as this is beyond frustrating.

Site URL: https://penguin-daisy-j23y.squarespace.com/ In the first section of the website, my client is seeing the font much smaller than I am in my device checks. I'm running through if she's seeing the smaller size because of her computer settings, but still TBD. Essentially, it should be larger (screenshot attached) and that's what I'm seeing on my end so I'm finding it hard to troubleshoot why she continually sees the font here so much smaller! 🙂 Any tips? PW: MYNDY123

Hello. I am looking for code that will allow me to change the font size on a gallery grid block ( not a summary block). Any help will be greatly appreciated. Thank You

I'm having a problem with my fonts scaling properly and I can't figure out what's going on. This is a SS 7.1 site. I have my base font size set to 14px (that was the default). I set my H1 size to 3.6rem in the Site Styles (equivalent is 50.4px when I view in the inspector) I set my p2 size to 1.35rem (equivalent is 18.9px when I view in the inspector). These sizes display correctly when my browser window is set above 1620px wide, but when I size the window smaller than that, the font sizes get much BIGGER, which seems counter-intuitive, and not at all how I want them to appear. I want them to be the same. I can see these parameters in the CSS, but I don't know how the formula works. Can anyone help me? I want the fonts to be the same scale for all laptop and desktop resolutions. @media screen and (min-width: 0px) and (max-width: calc(1619px)) and (orientation: landscape) h1 { font-size: calc((3.6 - 1) * 1.2vw + 1rem); } @media screen and (min-width: 1620px) h1 { font-size: calc(3.6 * 1rem); } The second value (for the 1620px width) is the one I want for all. I wish I didn't have to do this as custom CSS, I feel like this should work better as the default. Is there something I've missed in the Site Styles tools? Thank you!

After adding a custom font to the site when you navigate to a different page the custom font loads switch back to the original then reappears again. Is there something I added wrong that is causing it to "flash"? Unfortunately the site isn't ready to publish or I would provide a link. /* Eliminates margin surrounding block */ [data-section-id="62b239e571face0a010c1aaa"] .content-wrapper { max-width: 100%; padding-left: 1 !important; //Adjust left margin padding-right: 1 !important; //Adjust right margin } #block-4e2489bd7ca48fc338a6 { padding: 0; } [data-section-id="62b239e571face0a010c1aaa"] .sqs-row { margin: 0; } /* Changes form fields to white */ .form-wrapper .field-list .field .field-element{ background-color: #FAFBFC; border: 1px solid #000000; //Set to none to remove lines border-radius: 0; //Rounded edges } .form-wrapper input[type=submit]{ border: 1px solid #000000; transition: all .6s ease 0s!important; } .form-wrapper input[type=submit]:hover{ color: #000000 !important; background-color: #A88959 !important; //Hover background color } /* Hide scrollbar for Chrome, Safari, and Opera */ body::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE and Edge */ body { -ms-overflow-style: none; } /* Inquiries button hover color */ .sqs-button-element--primary:hover { color: #000000 !important; background-color: #A88959 !important; transition-duration: 0.4s; } /* Creates custom font Coral Blush Serif */ @font-face { font-family: 'CoralBlushSerif'; src: url('https://static1.squarespace.com/static/62b0d194d15c1631dea562e0/t/62f52d2d9078f203c99db2c5/1660235054018/CoralBlushSerif.woff'); } h1 {font-family:'CoralBlushSerif'!important;} h2 {font-family:'CoralBlushSerif'!important;} h3 {font-family:'CoralBlushSerif'!important;} #collection-62b239e571face0a010c1aa4 a{ font-family:'CoralBlushSerif'!important; } #collection-62b2478209d3f80d7a069681 a{ font-family:'CoralBlushSerif'!important; } .list-section-title p{ font-family:'CoralBlushSerif'!important; }

Site URL: https://freedomofmovement.squarespace.com/ Hello, I am in the process of building a site and would need your help. I use the Growwell template and have a question about the portfolio block. Under the section 'Retreats' on my page I have chosen the portfolio block to present events. On the page where all projects/events are listed I have chosen the option where text is on each image/link. Is it possible to style the font individually? I would like to have the date (at the top) and the location (at the bottom) a bit smaller and in a narrower font style. I am attaching an example image from another site. I hope my concerns are somewhat understandable. I would truly appreciate your help!

Site URL: https://www.players-social.com/ Heya, does anyone know how to use custom font for header button. I manged to change the buttons on the site but not the button in the header: https://www.players-social.com/ Thanks very much

Site URL: https://www.ecdesigns.com.au/ Feeling a bit discouraged at the moment, I hope someone can help me here! Basically I'm rebuilding my site, and this time I'm using an Adobe font (which means I don't get to upload the font files in Squarespace as you would normally do) I think I followed all the steps correctly, but for some reason the font weight doesn't respond to any of the changes I make in the custom CSS window! It looks quite thick (and frankly I don't like it at all) but no matter which font weight I write in the CSS it won't change. This is the initial CSS I pasted: h1, h2, h3, h4 { font-family: ivypresto-display, serif; font-weight: 100; font-style: normal; } Then I tried to add the tag 'important' : h1, h2, h3, h4 { font-family: ivypresto-display, serif; font-weight: 100!important; font-style: normal; } Then I even tried to add the block ID: #block-62e84ce8a6a00313a250c053 { font-family: ivypresto-display,serif; font-weight: 100!important; font-style: normal; } Not sure if this will help at all, but here is the code provided by Adobe which I injected in the header: <link rel="stylesheet" href="https://use.typekit.net/wgr0pgr.css"> Here are Adobe's exact instructions: "To use these fonts on a web page, copy this code into the <head> tag of your HTML: <link rel="stylesheet" href="https://use.typekit.net/wgr0pgr.css">" So I pasted this into the code injection section, in the header window. I hope I did ok. Can anyone think of anything to make the font weight responsive? TIA

Site URL: https://albumlogy.com Hi guys, Does anyone know why the italicized words in my text look smaller than the rest? I'm using a custom font. This is bothering me a lot, I really appreciate if anyone knows how to solve this.

Site URL: https://www.audrafriedendesign.com/product-experience-design I've uploaded Manrope ExtraBold onto my Squarespace site, and it works in regular headings, paragraphs, buttons, and the header, but I cannot get it to work with the hovering Project Titles in the Portfolio section or the titles at the bottom of the page for neighboring projects. I am not sure where to start for the neighboring project titles and for the hover titles I have tried: .portfolio-hover[data-variant-hover-follow] .portfolio-hover-item-title { font-family: 'Manrope ExtraBold' !important; } AND: h1.portfolio-title { font-family: 'Manrope ExtraBold' !important; } Is there anything else I can try?

Site URL: https://www.codylafond.com/ I've managed to add a custom font to my site (Flatiron 7.0 template) but I can't for the life of me sort out how to control the font weight. The font itself can vary from quite thin to quite bold when used in Adobe programs, however it exclusively appears in a medium weight throughout my site and I cannot sort out how to get it to appear bold in some instances and thin in others. I suspect it may be due to the font being a variable weight font. I've tried specifying the font weight in CSS (ranges from 100 to 800) but it won't take effect. Any advice on how to approach?

Hello, I have used custom fonts on a site. However, the titles on Blog posts are set to the site's default font. Am I able to set the Blog title to h1? Thanks, Clueless2000

Site URL: https://www.audrafriedendesign.com/product-experience-design/project-three-5f6s7 I have uploaded the font Manrope ExtraBold onto my site and I've gotten it to work through CSS most places except for inside each portfolio project at the bottom where it displays the arrows to the neighboring projects in the portfolio. Here's a picture and a link to one of the pages where this problem is occurring: https://www.audrafriedendesign.com/product-experience-design/project-three-5f6s7 Any suggestions on the CSS to customize the fonts for these titles?

Hi guys, This code for the paragraph (large/small) doesn't work for me, p.sqsrte-large {font-family: 'Walsheim';} p.sqsrte-small {font-family: 'Walsheim';} although the usual "p" works. p {font-family: 'Walsheim';} Perhaps there is some kind of replacement? Thanks x

Site URL: https://www.mbird.ca/portfolio Hi! I'm having trouble adding a custom font for my portfolio page - I've tried both: h1.portfolio-title { font-family: 'Tobias' !important; } and h1.portfolio-title { font-family: 'Tobias' !important; } any recommendations? Tobias is loaded into my site and in use elsewhere so I'm unsure how to proceed.

How to remove the underline while keeping the link?

Site URL: https://spinach-nectarine-wkgx.squarespace.com Hi, I've added the following custom code below to use two different Adobe fonts on my site, but the Quincy CF is not loading properly for my headings. Does anyone know why this isn't working? spinach-nectarine-wkgx.squarespace.com password: branding Thanks in advance! ----------------------------- @font-face { font-family:"quincy-cf",serif; src: url(https://use.typekit.net/qah7uoj.css); } @font-face { font-family: proxima-nova, sans-serif; src: url(https://use.typekit.net/qah7uoj.css);

Hello folks 👋 I'm using the template 👇 https://seen-fluid-demo.squarespace.com/ and I'd like to know how to use a font that isn't included in the SS catalog (the Oaxaca font) also, how to add a secondary product image on hover, like on this Big Cartel theme 👇 https://testdrivesunscreen.bigcartel.com/ Thank you 🙂

Site URL: https://www.brandivanderwolfphotography.ca/home I have a custom font on my website "Jonathan" . Previously it worked fine on all platforms up until a month ago, when it stopped getting viewed as a script font on Safari and iOS (as far as I can tell) and just shows as a Serif font. Nothing had changed in my CSS. It still views fine on Chrome. Current CSS: font-face { font-family: ‘Jonathan’; src: url('https://static1.squarespace.com/static/612805b13766f76daeb68027/t/61a8f67ff8c4752974f59c16/1638463103868/Jonathan.otf'); src: url(https://static1.squarespace.com/static/612805b13766f76daeb68027/t/62c36a9f6b8df8606be4ec2e/1656973986230/Jonathan.ttf) } h3 { font-family: 'jonathan'; font-weight: 540; font-style: normal; font-size: 45px; letter-spacing: 0.1em; text-transform: normal; line-height: 1.3em; } Thank you for any help!