Custom web fonts for dummies

The font you are looking at is called BQN386, a derivative of the font APL385 patched with custom glyphs for the wonderfully esoteric programming language BQN. Just look at these saucy darlings:

1
2
3

+-×÷⋆√⌊⌈∧∨¬|=≠≤<>≥≡≢⊣⊢⥊∾≍⋈↑↓↕⌽⍉/⍋⍒⊏⊑⊐⊒∊⍷⊔
`˜˘¨⁼⌜´˝˙  ∘⊸⟜○⌾⎉⚇⍟⊘◶⎊
π‿∞‿@↩←⇐→,⋄  𝕨𝕩𝔽𝔾𝕎𝕏𝕗𝕘𝕊𝕤ℝ𝕣⦃⦄⟨⟩

Specifying custom fonts for a website is fairly straight forward, but it’s easy to make mistakes and can be difficult to debug. If you are in such a situation, I’d recommend using the Font Squirrel Webfont Generator to help cut through the nonsense.

This generator does a few nice things; first, it will provide you with compressed woff/ woff2 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 at-rule, e.g.

1
2
3
4
5
6
7
8

@font-face {
    font-family: 'BQN386';
    src: url('BQN386.woff2') format('woff2'),
         url('BQN386.woff') format('woff'),
         url('BQN386.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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. Once the font has been defined, it can be loaded from the selector of your choice, e.g.

1
2
3

body {
    font-family: 'BQN386';
}

You can find an example of the generated reference page here.