css/css-fonts/variations/variable-gsub.html

<!DOCTYPE html>
<html class="reftest-wait">
<link rel="match" href="variable-gsub-ref.html">
<meta charset="utf-8">
<style>
    @font-face {
    font-family: variabletest_box;
    src: url(resources/variabletest_box.ttf);
    }

    body {
    font-family: variabletest_box, sans-serif;
    sans-serif;
    font-size: 100px;
    }

    .rvrn_replaced {
    font-variation-settings: "FVTT" 10;
    }
</style>
<!-- The variabletest_box font has an r glyph that says "rvrn base" and has
     this as a name as well. And it has a glyph for R that says "rvrn subst"
     where rvrn stands for the required Required Variation Alternates
     feature. The font has an 'FVTT' axis ranging from 0 to 10, where it uses
     a single substitution glyph lookup table for axis values starting from
     5, which then replaces the rvrn_base glyph with the rvrn_subst
     glyph. So in this reftest the substituted glyph for lowercase r
     should visually match the uppercase R glyph, both show "rvrn subst". -->
r <span class="rvrn_replaced">r</span>
<script>
    document.fonts.ready.then(
        () => { document.documentElement.classList.remove("reftest-wait"); });
</script>
</html>