Usage

Brick was built to be easy-to-use. For uniformity, our URL formatting rules are similar to those at Google Fonts.

To get started, simply add a stylesheet on your site with the following format:

<link rel="stylesheet" href="//get.brick.im/Font+name:weights:[flags]/Font+name...">

For example, to use EB Garamond (regular and italic) and Open Sans (regular and bold), simply use

<link rel="stylesheet" href="//get.brick.im/EB+Garamond:400,400i/Open+Sans:400,700">

This will generate the following response (formatted):

@font-face {
 font-family: 'EB Garamond';
 font-style: normal;
 font-weight: 400;
 src: local('EB Garamond 12'), url(https://sea.cdn.brick.im/ebgaramond/400.otf) format('opentype'), url(https://sea.cdn.brick.im/ebgaramond/400.woff) format('woff');
}
@font-face {
 font-family: 'EB Garamond';
 font-style: italic;
 font-weight: 400;
 src: local('EB Garamond 12 Italic'), url(https://sea.cdn.brick.im/ebgaramond/400i.otf) format('opentype'), url(https://sea.cdn.brick.im/ebgaramond/400i.woff) format('woff');
}
@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 400;
 src: local('Open Sans'), url(https://sea.cdn.brick.im/opensans/400.otf) format('opentype'), url(https://sea.cdn.brick.im/opensans/400.woff) format('woff');
}
@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 700;
 src: local('Open Sans Bold'), url(https://sea.cdn.brick.im/opensans/700.otf) format('opentype'), url(https://sea.cdn.brick.im/opensans/700.woff) format('woff');
}

The font catalogue and preview can be found at the website. It's currently preview-only, but a URL builder will probably be coming soon.

I can't guarantee that all available fonts will be on the site, so for an exhaustive list, see the catalogue file.

• The font name letter case is strict (use what's in the catalogue)
• Either a literal space (%20 URL encoded) or a + to represent spaces in the font name
• Numeral font weights
• That the font you're trying to retrieve actually exists in the catalogue

We have a set of flags that you can add after the weights for each font to customize exactly what response you get.

• s: Enable SVG (gzipped) serving (for better rendering in Chrome; this may break some fonts though)
• o: Disable OTF serving
• w: Disable WOFF serving
• f: Don't try to use local installed fonts (force from server)

For example, if you wanted to enable SVG's and force from server for TeX Gyre Heros, and disable OTF's for Libre Baskerville, you would use

<link rel="stylesheet" href="//get.brick.im/TeX+Gyre+Heros:400,700:sf/Libre+Baskerville:400:o">

Brick uses a small CDN when downloading fonts (the CSS generation is not served from a CDN), selecting the closest server based on the user's IP (using MaxMind's GeoIP database).

• sea.cdn.brick.im: Seattle, WA, United States; also the CSS server
• lax.cdn.brick.im: Los Angeles, CA, United States

Want to help out by sponsoring a server? Please contact me by email.