dearnaomichan

@RuthLyne @tuanphan Have y'all found the solution to this?

@tuanphan You answered my question on the question I posted! I accidentally had "san-serif" in my @font area. Fonts are all working now!

@tuanphan wow yes thank you!! I just needed someone else's eyes on it.

@tuanphan yes! the page in the screenshot is https://thehighguide.squarespace.com/guides (pw:guide)

Site URL: https://thehighguide.squarespace.com/ Hello I'm having issues with my font not showing on devices other then my own. because its already installed on my computer, I think? But either way, when I check other devices, it looks like the fonts are loading to the website when I check under Application > Fonts in dev tools. I've preloaded the fonts so they're present, but not showing up on the website. Any help is extremely helpful, I truly don't understand whats going on. Do we need to purchase the subscription or something for it to show on 7.1? The fonts are Chap Regular and Sneak Regular. There are a lot of SVGs and PNGs with the font exported in it, but the live text doesn't show the font. This is what its suppose to look like: (attached img) pw: guide Please help!! Thank you so much for any advice!

@mdr_willis Hey did you ever find a solution?

Hey @tuanphan , do you mind helping me with a similar (but kinda different) issue? My font on my website won't show on any other devices (except for my computer, the one with the font loaded to it already). I uploaded them via the Custom File Manager and linked them: @font-face { font-family: 'Chap', sans-serif; src: url(https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c09e742d9264d45cfab2/1624555678728/Chap+Regular.woff), url(https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c108a6105b3a57b2a280/1624555784250/Chap-Regular.ttf); } @font-face { font-family: 'Sneak-Regular', sans-serif; src: url(https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c0b1e8b78c2e37d7b78c/1624555697236/Sneak-Regular.woff), url(https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c173b0883a4b7153979b/1624555891816/Sneak-Regular.ttf); } h1, h2, .image-title.sqs-dynamic-text h4 { font-family: 'Chap', sans-serif !important; } a, p, h3, h4, h5, h6, .sqs-block-collectionlink a, .sqs-block-button-element, .header-title:after, .sqs-block-quote blockquote, input { font-family: 'Sneak-Regular', sans-serif; } I check on someone else's device and I can't see any of the custom fonts, but since I'm preloading them they're showing up in the Dev Tools Application area. If I don't preload them, then they don't show up in the Dev tools at all. But either way the font doesn't show up on the website. preloaded in the Code Injection Header area: <link rel="preload" href="https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c09e742d9264d45cfab2/1624555678728/Chap+Regular.woff" as="font" type="font/woff" crossorigin="anonymous"> <link rel="preload" href="https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c108a6105b3a57b2a280/1624555784250/Chap-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous"> <link rel="preload" href="https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c0b1e8b78c2e37d7b78c/1624555697236/Sneak-Regular.woff" as="font" type="font/woff" crossorigin="anonymous"> <link rel="preload" href="https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c173b0883a4b7153979b/1624555891816/Sneak-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous"> Maybe its something wrong with the font links but I don't get whats going on. Any help is appreciated!! https://thehighguide.squarespace.com/ pw: guide

@sorca_marian ok great because that would be extremely helpful! I am specifically trying to stick the A-Z element on the first section of this page (https://thehighguide.squarespace.com/glossary-a pw: guide) so it sticks at the top over the other section below it. I've make sticky elements within the same section, but never over other sections. But i've found that Jquery is extremely heavy and weights down the website. Thats why I asked about vanilla javascript. Any advice would be helpful, Thanks!

@sorca_marian Do you have a solution using Javascript? Not using Jquery?

A long over due update, all my SVGs started working after we purchased a subscription and were not in the trial period anymore!

UPDATE: I'm having issues linking ALL my SVG images, not just on this page. I feel like it might be a 7.1 template issue? Since I can't upload and SVG image to an image block or in the CSS File Manager, I must upload it on a separate page and use the link to the image. I've done this several times before in the past but for some reason on this website it isn't working. I've reached out to SqSp Help Email to see if they can shed any light on the issue of a link to a file in the file manager not working.

Hi @creedon ! Thanks for responding. I have uploaded the files in a separate page (thats not linked) so I can use the URL in the CSS: Heres all the CSS for this accordion section on this page (specifically .tab-label::after) : // Loan Programs Section .programs__row input { position: absolute; opacity: 0; z-index: -1; } /* Layout */ .programs__row { display:flex; } .programs__row .programs__col { flex:1; } .programs__row .programs__col:last-child { margin-left: 1em; } /* Accordion styles */ .tabs { overflow: hidden; } .tab { width: 100%; border-bottom: 1px solid white; overflow: hidden; } .tab:first-child{ border-top: 1px solid white; } .tab-label { display: flex; justify-content: space-between; padding: 2.5rem; cursor: pointer; align-items: center; transition: all .35s ease; } /* Icon */ .tab-label::after { content: url(/s/dropdown-arrow.svg); width: 3em; height: 3em; text-align: center; transition: all .35s ease; vertical-align: middle; } .tab-content { background: #0071BE; color: white; max-height: 0; padding: 0 2.5em; transition: all .35s ease; } .tab-close { display: flex; justify-content: flex-end; padding: 1em; font-size: 0.75em; cursor: pointer; } /* :checked */ input:checked ~ .tab-content { //background: blue; max-height: 200vh; padding: 2em 2.5em; } input:checked ~ .tab-label { //background: white; } input:checked + .tab-label::after { transform: rotate(90deg); } .tab-content .tab-button a{ display: block; }

Site URL: https://www.redmondfunding.com/ For some reason the SVG links for this website aren't showing up on the live site but showing on the editor. It's the arrows on the right side of the accordion. on this page: https://redmond-funding-group.squarespace.com/loan-programs pw: redmond I just need another set of eyes on this. I think that it might be because I'm using a :after pseudo class but why would that be a problem?

@Agha_Waqas its so odd, if I try the sticky bit on a regular page (not on an index page) it works just fine? So I am so confused by that. @squarespace why is this happening?!?! https://naomichan-portfolio.squarespace.com/stickyexample

@Agha_Waqas I am trying to do this exact thing with a custom code block and can't get it to work. I made this locally on my computer to test it before plopping it in but it's not working. Can you please take a look and see if what I'd doing wrong? Heres the website I'm trying to do this in the black section down where it says "Let's make your website dreams come true" I'm trying to make the text on the right stick while you scroll through the work on the left (I havent added the work yet, just trying to make the sticky work right now)