mpercivalxyz

this website!
Log | Files | Refs

managing-custom-web-fonts.md (2217B)

      1 ---
      2 title: "Custom web fonts for dummies"
      3 date: 2022-08-20T09:30:50+01:00
      4 draft: false
      5 ---
      6 
      7 The font you are looking at is called [BQN386](https://github.com/dzaima/BQN386.git), a derivative of the font [APL385](http://www.apl385.com/fonts/) patched with custom glyphs for the wonderfully esoteric programming language [BQN](https://mlochbaum.github.io/BQN/).
      8 Just look at these saucy darlings:
      9 
     10 {{< highlight BQN "linenos=true, style=paraiso-dark" >}}
     11 +-×÷⋆√⌊⌈∧∨¬|=≠≤<>≥≡≢⊣⊢⥊∾≍⋈↑↓↕⌽⍉/⍋⍒⊏⊑⊐⊒∊⍷⊔
     12 `˜˘¨⁼⌜´˝˙  ∘⊸⟜○⌾⎉⚇⍟⊘◶⎊
     13 π‿∞‿@↩←⇐→,⋄  𝕨𝕩𝔽𝔾𝕎𝕏𝕗𝕘𝕊𝕤ℝ𝕣⦃⦄⟨⟩
     14 {{< /highlight >}}
     15 
     16 Specifying custom fonts for a website is fairly straight forward, but it's easy to make mistakes and can be difficult to debug.
     17 If you are in such a situation, I'd recommend using the [Font Squirrel Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator) to help cut through the nonsense.
     18 
     19 This generator does a few nice things; first, it will provide you with compressed [woff/ woff2](https://en.wikipedia.org/wiki/Web_Open_Font_Format) formats of your font that are compatible with most modern browsers, and more importantly it generates a reference html page demonstrating exactly how to load your custom font through the css [@font-face](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) at-rule, e.g.
     20 
     21 {{< highlight CSS "linenos=true, style=paraiso-dark" >}}
     22 @font-face {
     23     font-family: 'BQN386';
     24     src: url('BQN386.woff2') format('woff2'),
     25          url('BQN386.woff') format('woff'),
     26          url('BQN386.ttf') format('truetype');
     27     font-weight: normal;
     28     font-style: normal;
     29 }
     30 {{< /highlight >}}
     31 
     32 Note that the font format 'src' ordering is from most modern to least; this way, the most up-to-date format your browser is compatible with is the one that gets used.
     33 Once the font has been defined, it can be loaded from the selector of your choice, e.g.
     34 
     35 {{< highlight CSS "linenos=true, style=paraiso-dark" >}}
     36 body {
     37     font-family: 'BQN386';
     38 }
     39 {{< /highlight >}}
     40 
     41 You can find an example of the generated reference page [here](/bqn386-demo.html).