How to use variable fonts?

Question

How to use variable fonts?

I learned about variable fonts, decided to try them out and make a simple input type= "range" that would change the boldness of the letters.

Using the usual font-weight and setting the font family in css works, but the fat values are discrete, and I didn't understand how to use font-variation-settings in js, if writing through the camel case doesn't work, how to connect fonts via @font-face is also not clear, I specified the path to the font file and the format-the font is not at all applies.

text1 = document.querySelector("#variative>textarea");
w1 = document.querySelector('#variative>input[type=range]');

w1.addEventListener("change", function(e) {
  text1.style.fontVariationSettings = 'wght ' + w1.value;
});

@font-face {
  font-family: 'Roboto Slab';
  src: url("RobotoSlab-VariableFont_wght.ttf") format("woff2");
}

<div id="variative">
  <input type="range" min="100" max="900" value="400">
  <textarea cols="40" rows="2">Lorem ipsum</textarea>
</div>

0

javascript css шрифты

Author: Artyom, 2020-05-09

Source

2 answers

score 0 · Answer 1

Maybe css?

@media (max-width: 4096px) {
h1,
.h1 {
    font-size: calc(1.375rem + 1.5vw);
}
h2,
.h2 {
    font-size: calc(1.325rem + 0.9vw);
}
h3,
.h3 {
    font-size: calc(1.3rem + 0.6vw);
}
h4,
.h4 {
    font-size: calc(1.275rem + 0.3vw);
}
..........}

score 0 · Answer 2

text1.style.fontVariationSettings = 'wght ' + w1.value;

text1.style.fontVariationSettings = "'wght' " + w1.value;

var text1 = document.querySelector("#variative>textarea");
var w1 = document.querySelector('#variative>input[type=range]');

w1.addEventListener("change", function(e) {
  text1.style.fontVariationSettings = "'wght' " + w1.value;
});

@font-face {
  font-family: 'Roboto Slab';
  src: url("RobotoSlab-VariableFont_wght.ttf") format("woff2");
}

<div id="variative">
  <input type="range" min="100" max="900" value="400">
  <textarea cols="40" rows="2">Lorem ipsum</textarea>
</div>

PS: The mdn states that you can use font-weight with the appropriate value. Although, just in case, I would still hang a fallback with a normal one.