Skip to content

Instantly share code, notes, and snippets.

@dwhitney
Created May 4, 2022 14:09
Show Gist options
  • Save dwhitney/dac28f4dccfd7bb3f91255d030433a95 to your computer and use it in GitHub Desktop.
Save dwhitney/dac28f4dccfd7bb3f91255d030433a95 to your computer and use it in GitHub Desktop.
Loading fonts in CSS
<!doctype html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Water+Brush&display=swap');
@import url(https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css);
.waterBrush {
font-family: "Water Brush";
font-size: 34px;
}
@supports (font-variation-settings: normal) {
.firaCode { font-family: 'Fira Code VF', monospace; }
}
</style>
</head>
<body>
<h2>Water Brush</h2>
<p class="waterBrush">The quick brown fox jumped over the lazy moon</p>
<h2>Fira Code with ligatures enabled</h2>
<code class="firaCode">
divide :: Integer -> Integer -> Maybe Integer<br/>
divide numerator denomiator | denominator != 0 = Just (numerator / denominator)<br/>
divide _ _ = Nothing<br/>
<br/>
(divide 4 2) >== divide 2<br/>
</code>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment