Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Jun 21, 2018
Embed
What would you like to do?
Variable fonts simple demo
<h1>variable<span>fonts</span></h1>
// JS is to make the text editable, not required for the effect. Thanks for the suggestion @chriscoyier!
var h1 = document.querySelector("h1");
h1.addEventListener("input", function() {
this.setAttribute("data-heading", this.innerText);
});
$green: #ff0080;
$purple: #6e1f58;
$pink: #ff8c00;
body {
background: #23074d;
overflow: hidden;
}
@font-face {
font-family: "Gingham Variable";
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Gingham.woff2")
format("woff2"),
url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Gingham.woff")
format("woff");
}
h1 {
position: absolute;
top: 50%;
transform: translate(0, -50%);
margin: 0;
width: 100%;
font-size: 18vw;
font-family: "Gingham Variable", BlinkMacSystemFont, sans-serif;
font-variation-settings: "wght" 700, "wdth" 150;
color: $pink;
white-space: nowrap;
text-align: center;
transition: font-variation-settings 250ms ease-out;
text-shadow: -1px -1px 0 $purple, 1px -1px 0 $purple, -1px 1px 0 $purple,
1px 1px 0 $purple, 1px 0px 0px $green, 0px 1px 0px $green, 2px 1px 0px $green,
1px 2px 0px $green, 3px 2px 0px $green, 2px 3px 0px $green, 4px 3px 0px $green,
3px 4px 0px $green, 5px 4px 0px $green, 3px 5px 0px $purple,
6px 5px 0px $purple, -1px 2px 0 black, 0 3px 0 $purple, 1px 4px 0 $purple,
2px 5px 0px $purple, 2px -1px 0 $purple, 3px 0 0 $purple, 4px 1px 0 $purple,
5px 2px 0px $purple, 6px 3px 0 $purple, 7px 4px 0 $purple;
span {
font-variation-settings: "wght" 0, "wdth" 0;
transition: all 250ms ease-out;
}
&:hover {
font-variation-settings: "wght" 0, "wdth" 0;
span {
font-variation-settings: "wght" 700, "wdth" 150;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment