Alfred Xing edited this page Feb 19, 2017 · 15 revisions

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="//brick.a.ssl.fastly.net/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="//brick.a.ssl.fastly.net/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(//brick.a.ssl.fastly.net/fonts/ebgaramond/400.woff) format('woff');
}
@font-face {
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 400;
    src: local('EB Garamond 12 Italic'),url(//brick.a.ssl.fastly.net/fonts/ebgaramond/400i.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'),url(//brick.a.ssl.fastly.net/fonts/opensans/400.woff) format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'),url(http://brick.a.ssl.fastly.net/fonts/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.

  • f: Don't try to use local installed fonts (force from server)

For example, if you wanted to force from server for TeX Gyre Heros while loading Libre Baskerville normally, you would use

<link rel="stylesheet" href="//brick.a.ssl.fastly.net/TeX+Gyre+Heros:400,700:f/Libre+Baskerville:400">

Browser compatibility

Chrome Firefox (Gecko) Internet Explorer Opera Safari
6.0 3.5 (1.9.1) 9.0 11.10 5.1

For full browser compatibility (including mobile), see http://caniuse.com/woff

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.