Custom code tutorial in order to create font style checker

Design help Custom code
1

I would like to create a section within my site whereby you can edit the text and change it’s size and maybe weight. Example below. Can anyone suggest a tutorial anyway online where it will walk me through it?

https://homebird.webflow.io/

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @V_O,

Welcome to the Forum!

A quick search bringsup this tutorial which showcases the functionality of a range slider to change the font size. The principle works for all properties, given the font provides them.

This codepen uses more parameters to change the showcase font dynamically but uses the same technique.

These are not 100% self-explanatory but should help you get a good start on your code.
I hope this helps!

Cheers
Leon

3

Thanks for coming back to me @LeWolf .

So maybe it is using the same sort of method as this Webflow site does then? Type Checker - Webflow

I found some people talking about this following method and would rather avoid it because it involves a lot of hosting scripts and NPM and other things I am not quite up to speed on yet! fontsampler-js — A configurable standalone webfont type tester for displaying and manipulating sample text in the browser.
It looks a lot more complicated and not sure of its merit over the one above. I would rather do the first option.

My plan is to stack a few sections each with their own font style that you can change what the text says and also play around with their features - ie. leading/weight. Do you think the first option would be able to be adapted so that I can do this without them interfering with each other?

4

The first option built with webflow looks quite nice and seems to be what you’re trying to do.
Stacking multiple of these is possible, but will require changing all selectors in javascript. If one div has the ID “test” for example, you have to change the ID after duplicating it.

Duplicate IDs shouldn’t exist on your final page.

The second option seems to be deployable on a server, but not specifically webflow.

Cheers
Leon

5

Hey, Thanks so much for your response. I ended up going with that first option because it was much easier to understand and I have managed to get it working. I did as you suggested and have just changed the class names of each editable area in order to get them to stack.

Thanks for your advice though. Hard to know where to start as there are SO many options out there it can get quite confusing!

1 Like