tommiatke Posted October 4, 2022 Share Posted October 4, 2022 Site URL: https://yeahrighttype.com/index/p/cheap-thrills Hi there, I have a client who would like to have a demonstration box for sampling fonts. Basically to be able to type out the proposed font to trial it live on the site. I have seen an example on a Squarespace site that is EXACTLY what I am after but can't figure out if this is simply advanced coding or if it's a plugin (to which I can't seem to find its origin). The site is 'Yeah Right Type' and on the individual font pages, they have a demo box that allows for font sampling. If there is any direction forward as to whether it's a plugin to be purchased, or if it's something that can be created with coding...? Would love some thought. Thanks! Tom Link to comment
Beyondspace Posted October 4, 2022 Share Posted October 4, 2022 47 minutes ago, tommiatke said: Site URL: https://yeahrighttype.com/index/p/cheap-thrills Hi there, I have a client who would like to have a demonstration box for sampling fonts. Basically to be able to type out the proposed font to trial it live on the site. I have seen an example on a Squarespace site that is EXACTLY what I am after but can't figure out if this is simply advanced coding or if it's a plugin (to which I can't seem to find its origin). The site is 'Yeah Right Type' and on the individual font pages, they have a demo box that allows for font sampling. If there is any direction forward as to whether it's a plugin to be purchased, or if it's something that can be created with coding...? Would love some thought. Thanks! Tom Can you share the link to the page that you want to achieve? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
tommiatke Posted October 4, 2022 Author Share Posted October 4, 2022 25 minutes ago, bangank36 said: Can you share the link to the page that you want to achieve? Hi @bangank36, Apologies, I don't have a page set up yet as I'm still in discussion with a customer. Just wanted to know if it's achievable and/or needed a plugin purchased etc. The link to the actual website that contains the desired outcome is here: https://yeahrighttype.com/index/p/cheap-thrills I'm sure I could do up a dummy page if needed though. Thanks Tom Link to comment
Beyondspace Posted October 4, 2022 Share Posted October 4, 2022 5 minutes ago, tommiatke said: Hi @bangank36, Apologies, I don't have a page set up yet as I'm still in discussion with a customer. Just wanted to know if it's achievable and/or needed a plugin purchased etc. The link to the actual website that contains the desired outcome is here: https://yeahrighttype.com/index/p/cheap-thrills I'm sure I could do up a dummy page if needed though. Thanks Tom For this part on production item page I check that it is using a block code on addition information of product. Some javascript code is used to set the appropriate style when we scroll the the size and tracking BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
imaginarybeast Posted January 3, 2023 Share Posted January 3, 2023 Hey BeyondSpace, how did you end up achieving this? Did you purchase a plugin? I'm looking for some help for my own in-progress font commerce page. Link to comment
Lch77 Posted Sunday at 03:57 PM Share Posted Sunday at 03:57 PM Hi! I am looking for the same solution! Did anyone find a way to do this? I asked Chat GPt and this is the CSS code it gave me but its not working. @font-face { font-family: 'YourFontName'; src: url('URL_TO_YOUR_FONT.woff2') format('woff2'), url('URL_TO_YOUR_FONT.woff') format('woff'); font-weight: normal; font-style: normal; } <!DOCTYPE html> <html> <head> <style> @font-face { font-family: 'YourFontName'; src: url('YOUR_FONT_URL.woff2') format('woff2'); } #preview { font-family: 'YourFontName', sans-serif; font-size: 24px; /* Adjust as needed */ } </style> </head> <body> <textarea id="inputText" placeholder="Type here to see the font..." oninput="document.getElementById('preview').innerText = this.value"></textarea> <div id="preview"></div> </body> </html> Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment