A simple variable font demo using Gingham font.
A Pen by Mandy Michael on CodePen.
<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; | |
} | |
} | |
} | |
A simple variable font demo using Gingham font.
A Pen by Mandy Michael on CodePen.