How do make text editable on wed?

General topics
1

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!

2

with custom code, sure.

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

3

@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.

<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>
4

Thank you so much! This is has been really helpful :slight_smile:

1 Like