# How do make text editable on wed?

**URL:** <https://forum.readymag.com/t/how-do-make-text-editable-on-wed/589>\
**Category:** General topics\
**Created:** [August 24, 2022, 7:35am UTC](https://forum.readymag.com/t/how-do-make-text-editable-on-wed/589 "2022-08-24T07:35:42Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![zww](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/zww/32/464_2.png) [@zww](https://forum.readymag.com/u/zww)\
**Post date:** [August 24, 2022, 7:35am UTC](https://forum.readymag.com/t/how-do-make-text-editable-on-wed/589/1 "2022-08-24T07:35:42Z")

</div>

I am creating a website displaying some fonts I have made.  
Thus I want certain texts to be typable, so that people can try them out.  
Is there a way to make texts typable on the published website?

Thank you!

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [August 25, 2022, 7:51am UTC](https://forum.readymag.com/t/how-do-make-text-editable-on-wed/589/2 "2022-08-25T07:51:28Z")

</div>

with custom code, sure.

another approach would be to try to build something with the build in form tool.

---

<div class="post-metadata">

**Author:** ![HEADLESS.HORSE](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/headless.horse/32/144_2.png) [@HEADLESS.HORSE](https://forum.readymag.com/u/HEADLESS.HORSE)\
**Post date:** [August 25, 2022, 1:04pm UTC](https://forum.readymag.com/t/how-do-make-text-editable-on-wed/589/3 "2022-08-25T13:04:15Z")

</div>

@zww Welcome to the Readymag forum I would suggest doing a custom code one. Unsure what features you’d like to include but this hopefully is a good starting point.

```auto
<div class="tt">
  <!-- CHANGE THE NAMES OF THE VALUE TO YOUR FONT NAME OR FONT STYLE -->
  <select onchange="updateFont(this.value)">
    <option value="YOURNAME">Sans Serif</option>
    <option value="serif">Serif</option>
    <option value="monospace">Monospace</option>
    <option value="cursive">Cursive</option>
  </select>
  Font size:
  <input type="range" id="size" min="10" max="144" value="20" oninput="updateSize(this.value)">
  Line Height:
  <input type="range" id="size" min="10" max="144" value="26" oninput="updateLineHeight(this.value)">
</div>

<div class="sample" contenteditable="true">
  If you have your fonts as webfonts, you could easy make a live type tester using the actual webfonts.
  We have a super simple solution for this, but you could also make the OT-features available.
</div>

<style>
  @font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'YOURNAME';
    src: url('URLHERE');
  }

  * {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
  }

  body {
    margin: 40px;
  }

  .sample {
    margin-top: 60px;
    outline: none;
    font-size: 20px;
    font-family: 'YOURNAME';
    line-height: 26px;
  }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script>
  function updateSize(newVal) {
    var newFontSize = newVal + 'px';
    $('.sample').css('font-size', newFontSize);
  }

  function updateLineHeight(newVal) {
    var newFontSize = newVal + 'px';
    $('.sample').css('line-height', newFontSize);
  }

  function updateFont(newVal) {
    $('.sample').css('font-family', newVal);
  }
</script>

```

---

<div class="post-metadata">

**Author:** ![zww](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/zww/32/464_2.png) [@zww](https://forum.readymag.com/u/zww)\
**Post date:** [September 1, 2022, 1:52am UTC](https://forum.readymag.com/t/how-do-make-text-editable-on-wed/589/4 "2022-09-01T01:52:45Z")

</div>

Thank you so much! This is has been really helpful 🙂