Fira Code

5 styles · Variable
Google Fonts ↗

A monospace with programming ligatures, extended from Fira Mono.

Designer
Nikita Prokopov
Styles
5 (variable)
Weights
300–700
Format
woff2
File size
35 KB (fira-code-latin-wght-normal.woff2)
Licence
SIL Open Font License 1.1
Source
Google Fonts
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 &!?

Usage

Add the stylesheet to your page, then use the family in your CSS.

<!-- HTML in your document's head -->
<link rel="preconnect" href="https://cdn.msar.me">
<link rel="stylesheet" href="https://cdn.msar.me/fonts/fira-code/font.css">
/* CSS */
:root { font-family: 'Fira Code Variable', monospace; }

Prefer CSS? @import url('https://cdn.msar.me/fonts/fira-code/font.css'); does the same thing.

Click the text to type your own

Letterforms that carry the story

Styles

Light300

Morning by the river

Regular400

Quiet letterforms

Medium500

Stories for a grey day

SemiBold600

Light inside the words

Bold700

The smell of old books

Sample text

Type on a screen has one job before any other: to get out of the reader’s way. A good headline face earns attention in a few words, then hands the reader on to the text without a jolt. Weight, contrast and spacing do that work quietly, long before anyone notices the shapes themselves.

Serving a font well matters as much as drawing it well. A small file, a long cache lifetime and a stylesheet that swaps in without hiding the text are the difference between a page that reads at once and one that makes people wait.

Glyphs 222 characters

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖרÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿĂıŒœʼˆ˚˜̀́̃̄̈–—‘’‚“”„•…‹›⁄€™↑↓−∕￿