Variable Font Tester

Custom code
8

Here’s a quick version. You’d need to update font-family in the sample in css and make sure the values for the variable font are set correctly. I am sure there is a more elegant solution but it works! It’s an earlier version of the one I have on my website, so feel free to modify it. I believe it’s mostly done with ChatGPT and some other open source code I found online.

Make sure you’re using the correct name for the font family as Readymag changes the name on upload. You’d be able to see the name and url src in the Inspector tool.

If you need more help, let me know!

W

<div class="typetester">
    <select onchange="updateFont(this.value)">
        <option value="Resist Mono">Resist Mono</option>
    </select>
    SIZE:
    <input
        type="range"
        id="size"
        min="10"
        max="90"
        value="50"
        oninput="updateSize(this.value)"
        class="slider"
    />
    LINE HEIGHT:
    <input
        type="range"
        id="size"
        min="10"
        max="144"
        value="30"
        oninput="updateLineHeight(this.value)"
        class="slider"
    />
    WEIGHT:
    <input
        type="range"
        id="weight"
        min="100"
        max="900"
        value="400"
        oninput="updateWeight(this.value)"
        class="slider"
    />
</div>
<div class="sample" contenteditable="true">
    New Type Tester is Finally Online on groteskly.xyz/
</div>
<style>
    select {
        -webkit-appearance: none;
        position: relative;
        top: -5px;
        border: 1px solid #0022ff;
        width: 130px;
        height: 20px;
        border-radius: 30px;
        background-color: #ffffff;
        outline: none;
        font-size: 12px;
        font-family: "Resist Mono";
        text-indent: 10px;
    }

    .typetester {
        font-size: 12px;
        font-family: "Resist Mono";
        font-style: normal;
        text-align: center;
    }

    .slider {
        -webkit-appearance: none;
        position: relative;
        top: 2px;
        border: 1px solid #0022ff;
        width: 80px;
        height: 20px;
        border-radius: 30px;
        background-color: #ffffff;
        outline: none;
        margin: 0 10px;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background-color: #0022ff;
        cursor: pointer;
        transition: background-color 0.15s ease-in-out;
    }

    .slider::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #4CAF50;
        cursor: pointer;
        transition: background-color 0.15s ease-in-out;
    }

    .sample {
        border: 1px solid #0022ff;
        padding-top: 10px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;

        border-radius: 20px;
        margin-top: 15px;
        outline: none;
        font-size: 40px;
        font-family: "Resist Mono";
        line-height: 50px;
    }
</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);
    }

    function updateWeight(newVal) {
    $('.sample').css('font-weight', newVal);
    }
</script>
1 Like