GitHub’s Typefaces Go Open Source

GitHub has released two variable open source fonts—Mona Sans and Hubot Sans—under the Open Font License (OFL). Both fonts, already in use across GitHub’s web properties, are now available for anyone to download and integrate into their own projects. Each includes three variable axes—weight, width, and slant—offering thousands of possible combinations from a single font file.

Two Fonts, Two Personalities

Mona Sans serves as GitHub’s primary typeface, designed in collaboration with Degarism. It draws inspiration from industrial-era grotesques and is built to remain expressive across product interfaces, web pages, and print. You’ll see it on GitHub’s marketing pages such as /home and /features/copilot, where it handles everything from body text to headers and pull-quotes.

Where Mona Sans offers broad adaptability, Hubot Sans brings a sharper character. It’s the secondary brand font, with more geometric accents lending a technical, idiosyncratic feel—particularly suited to headers and pull-quotes. Hubot Sans appears in the ReadME Project and on the GitHub Universe site.

What Variable Fonts Let You Do

Variable fonts package a set of axes into a single font file, giving you granular control over how glyphs render. Instead of loading separate files for different weights or widths, you can smoothly adjust those parameters—moving vector points in real time—to match content and design needs. Both Mona Sans and Hubot Sans support:

  • Weight: ranging from ultra thin to extra heavy
  • Width: from condensed to expanded
  • Slant: from regular to italics

These axes can be combined freely, producing thousands of distinct looks from one file.

Using the Fonts in Your Project

You can download Mona Sans from the github/mona-sans repository and Hubot Sans from github/hubot-sans. For local installations, the variable .ttf versions are recommended; for web use, serve the variable woff2 files. Set them up in your CSS with an @font-face declaration:

@font-face {
  font-family: 'Mona Sans';
  src:
    url('Mona-Sans.woff2') format('woff2 supports variations'),
    url('Mona-Sans.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-stretch: 75% 125%;
}

@font-face {
  font-family: 'Hubot Sans';
  src:
    url('Hubot-Sans.woff2') format('woff2 supports variations'),
    url('Hubot-Sans.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-stretch: 75% 125%;
}

Once declared, the fonts work like any other:

html {
  font-family: 'Mona Sans';
}

blockquote {
  font-family: 'Hubot Sans';
}

The declared ranges run from 200 to 900 for weight and from 75% to 125% for font-stretch. You can combine them arbitrarily—thin and narrow text, for example:

.text-thin-narrow {
  font-weight: 200;
  font-stretch: 75%;
}

Or wide and black:

.text-wide-black {
  font-weight: 900;
  font-stretch: 125%;
}

Or anything in between:

.text-header {
  font-weight: 745;
  font-stretch: 112%;
}

All from a single loaded file—fewer requests, better performance, and more flexible typography.

Performance Considerations

Variable fonts already reduce the number of font files a page needs, but you can further improve render speed and reduce cumulative layout shift (CLS) with three practices: preloading, subsetting, and custom fallback fonts.

Preload each font file by adding a snippet to your <head>:

<link rel="preload" href="Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="Hubot-Sans.woff2" as="font" type="font/woff2" crossorigin>

Subsetting strips unused glyphs from your font file, cutting load time. Tools like glyphhanger can analyze your content and generate a minimal glyph set.

Custom fonts that load after the initial render cause a visible swap from fallback to webfont. To minimize that jarring shift, define fallback fonts with size-adjust, ascent-override, and descent-override that match your usage. The exact configuration depends on your layout, but a fallback for Mona Sans Regular based on Arial might look like:

@font-face {
  font-family: 'Mona Sans Fallback';
  size-adjust: 108.5%;
  ascent-override: 82%;
  src: local(Arial);
}

Contributing Back

Both fonts are open source, and GitHub welcomes pull requests to improve them. You can contribute to github/mona-sans and github/hubot-sans directly on GitHub.