<h1 id="css-fonts">CSS fonts<a aria-hidden="true" class="anchor-heading icon-link" href="#css-fonts"></a></h1>
<h2 id="optimisation">Optimisation<a aria-hidden="true" class="anchor-heading icon-link" href="#optimisation"></a></h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable fonts guide - CSS: Cascading Style Sheets | MDN</a></li>
<li><a href="https://web.dev/font-display/?utm_source=lighthouse&#x26;utm_medium=devtools">Ensure text remains visible during webfont load</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload">Link types: preload - HTML: HyperText Markup Language | MDN</a></li>
<li><a href="http://www.bramstein.com/writing/preload-hints-for-web-fonts.html">Preload Hints For Web Fonts - Bram Stein</a></li>
</ul>
<h2 id="variable-font-animation-with-css">Variable Font Animation with <a href="/notes/sy65gpIIR4uL1kM0FmouR">CSS</a><a aria-hidden="true" class="anchor-heading icon-link" href="#variable-font-animation-with-css"></a></h2>
<p>source: <a href="https://css-irl.info/variable-font-animation-with-css-and-splitting-js/">CSS { In Real Life } | Variable Font Animation with </a><a href="/notes/sy65gpIIR4uL1kM0FmouR">CSS</a> and Splitting <a href="/notes/dNndN7SZmyZYwoQf">JavaScript</a></p>
<hr>
<strong>Backlinks</strong>
<ul>
<li><a href="/notes/vLyeYcDO9dgu0tdj6xiTU">2022-01-12</a></li>
<li><a href="/notes/QBF0eQyhkMwYfdKLMKNur">2022-01-14</a></li>
<li><a href="/notes/x3zquaa9ErZDqc8M7aPmV">CSS Vuejs</a></li>
</ul>

CSS fonts


![](/assets/images/logo.svg){width: 20%, opacity: 0.7, float: right, margin: 20px, border: 5px solid black}

👋 Hi, I'm Arnaud!

Welcome to my digital garden. This my online home for incubating new ideas. I aim to help future readers (including myself) grow these snippets into serendipidata.

The site structure is constantly evolving, but you are welcome to browse. Here's why I started tending a digital garden.


CSS fonts

Optimisation

Variable Font Animation with CSS