Usage

Quick start

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');
}

Font catalogue

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.

Advanced usage & notes

What's actually required

• 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

Flags

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)

CDN

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).

Server List

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

Server sponsoring

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