Hello. I am trying to find a way to make sliders to modify various properties of a variable font. While the variable font can be affected by simple actions like hover (there’s a very simple code for this), when I try to link the element to a slider (by using the same widget ID), nothing at all happens.
Is it at all possible to make it work, or is there a better and more efficient way to go about this? Thanks in advance!
hello, im also trying to do a variable font tester and cant get it to work. did you figure out a way to make it work? Thanks in advance!
could you give me some starting point of your code? I could have a look onto it as I´m also interested in how this can work.
Hey there! Thanks for your interest!
Sure, feel free to browse the finished testers on our studio website, groteskly.xyz
I’d be happy to share a snippet of an earlier version here. If you’re interested of course!
Hey there, I’ve provided a link to the functioning testers on my website below. If you need a snippet of the code, I’d happily share one of the earlier versions!
hello, Im having the same problem with the variable Font. Would you mind sharing a snippet of the code. It would be much appreciated.
thanks
yes that would be great, how did you link the text to the slider if i cant get it to work, thanks a lot
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>
Sure. I posted the code in response to another comment. Feel free to check it out!
yes thank you so much! the code works but if i copy and paste the code to create a second font tester the silders only respond to the “original” typetester. I changed the name of the classes and id’s but it still does not address the silders to the second typetester. do you know how to fix this or what to change in the code?
or is there another way to code multiple fonttesters on one page?
Linda,
Yeah, you won’t be able to just duplicate the code and expect it to work. All the values are the same in the testers, so unless you’re using it in the iFrame mode, you would need to add the testers manually in the code. Here’s how you can do that.
For better results you can try to work with ChatGPT to see how you can improve this code for your needs.
<!DOCTYPE html>
<html>
<head>
<title>Font Typetester</title>
<style>
button {
width: 50px;
color: #ffffff;
font-weight: normal;
background-color: #000000;
border: 0px solid #ffffff;
font-family: 'custom_79658';
font-size: 8px;
}
select {
-webkit-appearance: menulist;
cursor: pointer;
display: wrap;
width: 150px;
align-items: left;
justify-content: space-between;
border: 0px solid #ffffff;
border-radius: 10px;
padding: 5px;
background-color: #000000;
color: #ffffff;
font-weight: normal;
font-family: 'custom_79658';
font-size: 8px;
text-indent: 5px;
margin-right: 20px;
}
.typetester {
font-size: 8px;
margin-left: 25px;
color: #ffffff;
margin-bottom: 20px;
font-family: 'custom_79658';
display: flex;
align-items: center;
}
.slider-container label {
margin-right: 7px;
display: inline-block;
width: 30px;
text-align: right;
}
.slider-container {
display: flex;
align-items: center;
}
.font-container {
display: flex;
text-decoration: underline;
align-items: center;
margin-left: -10px;
margin-right: 30px;
}
@font-face {
font-weight: normal;
font-style: normal;
font-family: 'custom_79658';
}
.size-slider {
-webkit-appearance: none;
appearance: none;
vertical-align: middle;
position: relative;
width: 120px;
height: 1px;
border-radius: 51px;
background-color: #ffffff;
outline: none;
margin: 4px;
margin-right: 50px;
top: -1px !important;
}
.weight-slider,
.spacing-slider {
-webkit-appearance: none;
appearance: none;
vertical-align: middle;
position: relative;
width: 70px;
height: 1px;
border-radius: 51px;
background-color: #ffffff;
outline: none;
margin: 4px;
margin-right: 75px;
top: -1px !important;
}
.size-slider::-webkit-slider-thumb,
.weight-slider::-webkit-slider-thumb,
.spacing-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ffffff;
cursor: pointer;
position: relative;
transition: background-color 0.15s ease-in-out;
}
.size-slider::-moz-range-thumb,
.weight-slider::-moz-range-thumb,
.spacing-slider::-moz-range-thumb {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ffffff;
cursor: pointer;
position: relative;
top: -4px;
transition: background-color 0.15s ease-in-out;
}
.sample#sample1 {
color: #ffffff;
padding: 10px 20px 15px;
border-radius: 20px;
margin-top: -10px;
outline: none;
font-size: 116px;
font-family: 'custom_79658';
line-height: 1.2;
font-weight: 400;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
width: 950px;
}
.sample#sample2 {
color: #ffffff;
padding: 10px 20px 15px;
border-radius: 20px;
margin-top: -10px;
outline: none;
font-size: 116px;
font-family: 'custom_79658';
line-height: 1.2;
font-weight: 100;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
width: 950px;
}
.slider-value {
margin-left: -60px;
margin-right: 50px;
font-family: 'custom_79658';
font-size: 8px;
color: #ffffff;
display: inline-block;
vertical-align: middle;
}
.reset-btn {
margin-left: auto;
}
</style>
</head>
<body>
<div class="typetester" id="typetester1">
<div class="font-container">
<label for="font-select">FONT</label>
<select id="font-select" onchange="typetester1.updateWeight(this.value)">
<option value="100">Resist Mono Thin</option>
<option value="159">Resist Mono Light</option>
<option value="261">Resist Mono Book</option>
<option value="390">Resist Mono Regular</option>
<option value="566">Resist Mono Medium</option>
<option value="743">Resist Mono SemiBold</option>
<option value="900">Resist Mono Bold</option>
</select>
</div>
<div class="slider-container">
<label for="size">
<span id="font-size-display">116px</span>
</label>
<input type="range" id="size" min="10" max="150" value="116" class="size-slider">
</div>
<div class="slider-container">
<label for="weight">WEIGHT</label>
<input type="range" id="weight" min="100" max="900" value="100" class="weight-slider">
<span class="slider-value" id="weight-value">100</span>
<label for="letter-spacing">SPACING</label>
<input type="range" id="letter-spacing" min="-5" max="5" value="0" class="spacing-slider">
<span class="slider-value" id="spacing-value">0</span>
</div>
<button class="reset-btn">Reset</button>
</div>
<div class="sample" id="sample1" contenteditable="true" spellcheck="false">Tester 1</div>
<div class="typetester" id="typetester2">
<div class="font-container">
<label for="font-select">FONT</label>
<select id="font-select" onchange="typetester2.updateWeight(this.value)">
<option value="100">Resist Mono Thin</option>
<option value="159">Resist Mono Light</option>
<option value="261">Resist Mono Book</option>
<option value="390">Resist Mono Regular</option>
<option value="566">Resist Mono Medium</option>
<option value="743">Resist Mono SemiBold</option>
<option value="900">Resist Mono Bold</option>
</select>
</div>
<div class="slider-container">
<label for="size">
<span id="font-size-display">116px</span>
</label>
<input type="range" id="size" min="10" max="150" value="116" class="size-slider">
</div>
<div class="slider-container">
<label for="weight">WEIGHT</label>
<input type="range" id="weight" min="100" max="900" value="100" class="weight-slider">
<span class="slider-value" id="weight-value">100</span>
<label for="letter-spacing">SPACING</label>
<input type="range" id="letter-spacing" min="-5" max="5" value="0" class="spacing-slider">
<span class="slider-value" id="spacing-value">0</span>
</div>
<button class="reset-btn">Reset</button>
</div>
<div class="sample" id="sample2" contenteditable="true" spellcheck="false">Tester 2</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
class FontTypetester {
constructor(containerId) {
this.container = $("#" + containerId);
this.sampleElement = this.container.next(".sample");
this.sizeValue = this.container.find("#font-size-display");
this.weightValue = this.container.find("#weight-value");
this.spacingValue = this.container.find("#spacing-value");
this.container.find("#size").on("input", (e) => this.updateSize(e.target.value));
this.container.find("#weight").on("input", (e) => this.updateWeight(e.target.value));
this.container.find("#letter-spacing").on("input", (e) => this.updateSpacing(e.target.value));
this.container.find(".reset-btn").on("click", () => this.resetValues());
}
updateSize(newVal) {
var newSize = newVal + "px";
this.sampleElement.css("font-size", newSize);
this.sizeValue.text(newVal);
}
updateWeight(newVal) {
var newWeight = newVal;
this.sampleElement.css(
"font-variation-settings",
"'wght' " + newWeight
);
this.weightValue.text(newWeight);
this.container.find("#weight").val(newWeight);
}
updateSpacing(newVal) {
var newSpacing = newVal + "px";
this.sampleElement.css("letter-spacing", newSpacing);
this.spacingValue.text(newVal);
}
resetValues() {
this.container.find("#size").val(116);
this.container.find("#weight").val(100);
this.container.find("#letter-spacing").val(0);
this.updateSize(116);
this.updateWeight(100);
this.updateSpacing(0);
}
}
var typetester1 = new FontTypetester("typetester1");
var typetester2 = new FontTypetester("typetester2");
</script>
</body>
</html>