This repository was archived by the owner on Jan 21, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 94
Usage
Raul Tambre edited this page Feb 10, 2019
·
16 revisions
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.freetls.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.freetls.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.freetls.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.freetls.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.freetls.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.freetls.fastly.net/fonts/opensans/700.woff) format('woff'); }
- 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.
-
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.freetls.fastly.net/TeX+Gyre+Heros:400,700:f/Libre+Baskerville:400">
| 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