<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300...800&display=swap" rel="stylesheet">

<p class="top"> Font Name: <a href="https://www.harbortype.com/fonts/rocher-color/">Rocher</a> | Color font and palette replace demo</p>
<h1 class="rocher color-default">Default Palette</h1>
<h1 class="rocher color-pink">Pink Palette</h1>
<h1 class="rocher color-override-all">All Color Override</h1>
<h1 class="rocher color-override-part">justfont</h1>

<p> Font Name: <a href="https://www.harbortype.com/fonts/rocher-color/">Rocher</a> | Variable Color font with hover animation demo</p>
<h1 class="rocher color-default rocher-anim rocher-anim1">Hover Bevel and Shadow</h1>
<h1 class="rocher color-pink rocher-anim rocher-anim2">Hover Shadow</h1>
<h1 class="rocher color-mint rocher-anim rocher-anim3">Hover Bevel</h1>


<p> Font Name: <a href="https://fonts.google.com/specimen/Open+Sans">Open Sans</a> | Variable with single and multi axes demo</p>
<h1 class="opensans one-axis-wght">Single Weight Axis</h1>
<h1 class="opensans one-axis-wdth">Single Width Axis</h1>
<h1 class="opensans two-axis" data-splitting>Double Axes</h1>

<link href="https://res.cloudinary.com/dr6lvwubh/raw/upload/v1581441981/Anicons/anicons.css" rel="stylesheet">
<p> Font Name: <a href="https://typogram.github.io/Anicons/index.html">Anicon</a> | Variable icon font with hover animation </p>
<h1 class="icon anicon"> A m H a c h s 1 7</h1>
<h1 class="icon anicon-color"> A m H a c h s 1 7</h1>
<hr style="width:80%">
<p>WebConf Taiwan 2023 | by <a href="https://ho.chingru.me">ChingRu (https://ho.chingru.me)</a><p>
body {
  background-color: #f9fafa;
}

@font-face {
  font-family: 'Rocher';
  src: url(https://assets.codepen.io/9632/RocherColorGX.woff2);
}

top {
  margin-top: 2em
}

body {
  text-align: center;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  font-size: 2em;
  margin: 0;
}

/* Rocher */

.rocher {
  font-family: 'Rocher';
}

@font-palette-values --Default {
  font-family: Rocher;
  base-palette: 0;
}

@font-palette-values --OverrideAll {
  font-family: Rocher;
  override-colors:
    0 #2C4251,
    1 #D16666,
    2 #B6C649,
    3 #1cad70;
}

@font-palette-values --OverridePart {
  font-family: Rocher;
  base-palette: 1;
  override-colors: 0 #8D742A,
                   2 #87B377;

}

@font-palette-values --Pink {
  font-family: Rocher;
  base-palette: 1;
}

@font-palette-values --Mint {
  font-family: Rocher;
  base-palette: 7;
}

@font-palette-values --Gray {
  font-family: Rocher;
  base-palette: 9;
}

.color-default {
  font-palette: --Default;
}

.color-override-all {
   font-palette: --OverrideAll
}

.color-override-part {
   font-palette: --OverridePart
}

.color-pink {
  font-palette: --Pink;
}

.color-mint {
  font-palette: --Mint;
}

.color-gray {
  font-palette: --Gray;
}

.rocher-anim {
  font-variation-settings: "BVEL" 100, 'SHDW' 100;
  transition: font-variation-settings 0.4s ease;
}

.rocher-anim1:hover {
  font-variation-settings: "BVEL" 0, 'SHDW' 0;
}

.rocher-anim2:hover {
  font-variation-settings: "BVEL" 100, 'SHDW' 0;
}

.rocher-anim3:hover {
  font-variation-settings: "BVEL" 0, 'SHDW' 100;
}

/* Open Sans */

.opensans {
  font-family: 'Open Sans';
}

.one-axis-wght {
  font-variation-settings: 'wght' 100, 'wdth' 100;
  animation: wghtGrow 2s linear alternate infinite;
}

.one-axis-wdth {
  font-variation-settings: 'wght' 100, 'wdth' 100;
  animation: wdthGrow 2s linear alternate infinite;
}

.two-axis {
  font-variation-settings: 'wght' 100, 'wdth' 85;
  animation: breathe 5s linear alternate infinite;
  
}

@keyframes wghtGrow {
  0% {
    font-variation-settings: 'wght' 100;
  }
  100% {
    font-variation-settings: 'wght' 700;
  }
}

@keyframes wdthGrow {
  0% {
    font-variation-settings: 'wdth' 50;
  }
  100% {
    font-variation-settings: 'wdth' 100;
  }
}

@keyframes breathe {
  0% {
    font-variation-settings: 'wght' 100, 'wdth' 50;
  }
  60% {
    font-variation-settings: 'wght' 700, 'wdth' 100;
  }
  100% {
    font-variation-settings: 'wght' 100, 'wdth' 50;
  }
}

/* Anicon */

.anicon {
  font-family: "Anicons Regular"
}

.anicon-color {
  font-family: "Anicons Color"
}

.icon {
   font-variation-settings: "TIME" 1;
   transition: font-variation-settings 0.5s ease;
}
.icon:hover {
   font-variation-settings: "TIME" 100;
}
// Splitting()

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.