laurenkilbane03

Hey guys,
i design and sell fonts. currently i am selling them on myfonts.com, creativemarket.com and youworkforthem.com. though i wish to create a squarespace site of my own to sell my fonts on
is it possible to create code or install a plugin that will allow me to give users of my website the ability to test and preview my fonts by typing in any word, adjusting size, spacing and the style of the font?
lots of other tyopgraphic designers have wordpress websites that use the plugin called font sampler http://fontsampler.johannesneumeier.com/
please also see Grilli type website how they let users test their font before buying - https://www.grillitype.com/typeface/gt-super
if anyone has any solutions for use on a squarespace site i would be very interested
 
thank you!!

Kindly share your site with the protected password to find the solution for your issue

Creedon! You are a rockstar. 🤘 That worked perfectly. I can't thank you enough. 

In Design > Site Styles change Products Gallery > Design to Slideshow.

Let us know how it goes.

Hi!
If you're looking for a font preview tool for your website, please checkout https://fontvisual.com
You can create font preview links that you can share to customers, add to your site, or even embed as code.
For any questions, you may send an email to support@fontvisual.com.
Thanks!
 
 
 

Hello! I'm also looking for help with this font preview feature. "Font Peek" is a bit pricey (and I'm having some trouble with their free trial)... so I'm hoping there's a less expensive way to achieve this, if possible. Any tips are greatly appreciated!

@derricksrandomviews That article has some great resources. Thank you! I'm still looking for a plugin or code that will allows me to create the font preview tool (something customers can use to test my fonts before they buy). I know that it's easy to install on other platforms... just wondering if it's possible through Squarespace?

@Wolfsilon That worked perfectly... I can't thank you enough! You are the BEST.

Hello,
From looking at your page, it looks like all of the images are inserted using the inline image block. Here is a simple hover animation for your images that can be applied in the Custom CSS tab.
.design-layout-inline img { transition: all .5s; } .design-layout-inline img:hover { transform: scale(1.05); filter: grayscale(100%); border: 5px solid hotpink; } This is a simple and effective animation. Transition timing and easing functions can be anything you'd like. You can look up different easing timing functions using cubic-bezier(dot)com. Copy and paste the timing function just after the ".5s" but before the ";". Although it is not required to add Cubic Easing and just use the default settings.
I used a transform "scale" animation that acts like a magnifier when the image is hovered but there are plenty of other transform properties that you can use -- try them out by swapping out "scale(1.05)" with other values or properties.
The filter and border options are some of the other pieces of the hover animation that can be used to help the item stand out a bit more. You can also look up all of the different filters you can use as well.
 
Hope this helps!