Hi guys, new to webflow but love the idea of it for launching a digital type foundry.
One big question does anyone know of a Typetester / font previewer, similar to say; https://klim.co.nz/retail-fonts/domaine-display/ that can be integrated with webflow? Or is this something that must be custom-built.
Thanks so much.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hey! I made one using https://underscoretype.github.io/fontsampler-js/
Unfortunately, you gotta use the Custom-code of the website, but works pretty neat: http://devanesa.xyz/
Would you mind sharing how you did it? I’m quite new to javascript (and to code as a whole actually). I have already hosted the fontsampler.js file with this technique. Where I’m stuck is creating the “Embed” bloc in the page and somewhat call this .js file.
Thanks in advance!
In my case, I uploaded the font files to NPM and GitHub, so I can use a CDN like JSDelivr to use the files inside the .JS.
I’ve made a quick CodePen showcasing it: https://codepen.io/Kron98/pen/oNxLZNM
Let me know if that clarifies your doubts. If not, I’ll do my best to explain it better 
Thanks! I’ll look into it. If I keep failling I will get back to you
No problem! In that CodePen there are some lines you won’t need, but I hope it helps you figure this out 
Probably a dumb question: the font files need to be woff right?
Not dumb at all, but yes! They need to be woff to be usable by the Script
Might be the reason I couldn’t make it work haha 
Haha, it took me a bit to figure that part out, so you are not the only one
Hello Jorge,
Thanks again for sharing the codepen, it helped a lot!
There’s one thing I cannot figure out: changing the typeface inside the tester.
I tried to replace the URL (see below) but it doesn’t import the font.
Here’s the codepen I’m using. If you want to have a look.
Right, you will need to use a CDN. Unfortunately, I don’t think it works by grabbing the link from Webflow and pasting it. I uploaded them to NPM and then used JSDelivr to grab the link.
This link should help you upload it to NPM: https://zellwk.com/blog/publish-to-npm/
As soon as it’s uploaded, it’ll appear on JSDelivr if you search it. Alternatively, you can upload it to GitHub and then “call it” via JSDelivr, as well. https://www.jsdelivr.com/
Let me know if that works. If it doesn’t I’ll help you figure it out as soon as possible
Thanks for those precisions
The Github method doesn’t seem to work (see codepen again) — did I do something wrong? In the meantime I will try to use npm. Also, a side question: do the links used in this section need to be public? And if they can be private: how can I authorize fontsampler.js to access them?
Thanks again for your help
I had some issues as well with GitHub and npm seems to work fine for me. Regarding the links, I think they need to be public, unless you want to pay a fee in npm, I think.
Yaaay! It worked. Thank you SO MUCH for your help Jorge!
Haha! Awesome to know! Let me know if you need anytime my help!
Looking forward to seeing the tester live!
Aaaaand here I am with another question: how can I add more than one fontsampler “bloc” to a single page. I’d like to make one for each weight —rather than using the dropdown to select the style— but when I add them on top of each other, only one bloc appears on the published site. Thanks in advance!
Uhmm, that’s a great question. I am not entirely sure how to achieve that, to be honest. It should work by copying and pasting it again, but if it doesn’t you might need to send an email to the programmer of the Library. He usually responds pretty fast.
I am sorry I can’t help in that case :S
Hi Ronotypo,
Have you found a solution for adding more than one fontsampler “bloc” ?
I’m stuck at this point 
Hello Xavier,
I have! But I don’t really remember how — it’s been a long time!
Maybe (maybe) this is a question of ID. Each font-testing bloc should have a different one. Otherwise the browser will only render one… ?
