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

Advanced usage

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)

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">