All Projects → alfredxing → Brick

alfredxing / Brick

Open-source webfont service

Programming Languages

HTML
75241 projects
CSS
56736 projects
ruby
36898 projects - #4 most used programming language
go
31211 projects - #10 most used programming language
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Brick

Web Font Loading Recipes
A bunch of demos for different web font loading strategies. Companion to https://www.zachleat.com/web/comprehensive-webfonts/ Read more: https://www.zachleat.com/web/recipes/
Stars: ✭ 964 (-66.6%)
Mutual labels:  font, web-fonts
Woff2 Feature Test
A simple feature test for the WOFF2 font format
Stars: ✭ 106 (-96.33%)
Mutual labels:  font, web-fonts
Webfont Test
Test and analyze fonts for the web: Google fonts, system fonts and custom fonts.
Stars: ✭ 36 (-98.75%)
Mutual labels:  font, web-fonts
fonts
Web fonts that you probably won't find in a CDN
Stars: ✭ 26 (-99.1%)
Mutual labels:  font, web-fonts
Hack
A typeface designed for source code
Stars: ✭ 14,543 (+403.92%)
Mutual labels:  font, web-fonts
Pokemon Font
GAME BOY font from Pokémon R/G/B/Y/G/S/C, Unicode extended.
Stars: ✭ 437 (-84.86%)
Mutual labels:  font, web-fonts
Faux Pas
A script to highlight elements that are mismatched incorrectly to @​font-face blocks, which may result in shoddy faux bold or faux italic rendering.
Stars: ✭ 93 (-96.78%)
Mutual labels:  font, web-fonts
Fontfaceonload
A simple utility to execute a callback when a webfont loads.
Stars: ✭ 367 (-87.28%)
Mutual labels:  font, web-fonts
Powerline Web Fonts
Powerline Web Fonts for Chromebook
Stars: ✭ 178 (-93.83%)
Mutual labels:  font, web-fonts
Webfont
Awesome generator of webfont
Stars: ✭ 170 (-94.11%)
Mutual labels:  font, web-fonts
Glyphhanger
Your web font utility belt. It can subset web fonts. It can find unicode-ranges for you automatically. It makes julienne fries.
Stars: ✭ 1,099 (-61.92%)
Mutual labels:  font, web-fonts
glyphhanger
Your web font utility belt. It can subset web fonts. It can find unicode-ranges for you automatically. It makes julienne fries.
Stars: ✭ 422 (-85.38%)
Mutual labels:  font, web-fonts
Karmilla
An expanded version of the amazing Karla webfont, adding support for various languages (French, German, Norse, Hungarian, Latvian, Icelandic...)
Stars: ✭ 130 (-95.5%)
Mutual labels:  font, web-fonts
gatsby-omni-font-loader
Font loader optimized for maximum performance. Removes render-blocking font resources and loads them asynchronusly. Handle FOUT & FOUC with font loading status watcher. Supports both local-hosted fonts and web fonts.
Stars: ✭ 98 (-96.6%)
Mutual labels:  font, web-fonts
webfont-kit-generator
Create @ font-face kits easily
Stars: ✭ 52 (-98.2%)
Mutual labels:  font, web-fonts
Bungee
A chromatic signage typeface for vertical and horizontal setting.
Stars: ✭ 262 (-90.92%)
Mutual labels:  font
Swash
Fonts in iOS made safe, expressive, and dynamic.
Stars: ✭ 73 (-97.47%)
Mutual labels:  font
fontster
Font installer for Android.
Stars: ✭ 33 (-98.86%)
Mutual labels:  font
Decovar
A multistyle decorative variable font by David Berlow
Stars: ✭ 269 (-90.68%)
Mutual labels:  font
Xits
XITS - OpenType implementation of STIX fonts with math support
Stars: ✭ 257 (-91.09%)
Mutual labels:  font

Brick. Webfonts that actually look good.

Build Status

In the age of the Internet, we've found ourselves in yet another typographic battle. In an effort to speed up loading times, we've compressed fonts, and along the way, we've lost the majority of the quality of rendered type.

Let's change that. The fonts served by Brick are clones of the original, converted without modification to several formats for wider browser compatibility.

All fonts are served as WOFF-compressed versions of the originals—no quality lost.

Usage

Okay, let's get started. I don't want to overload the GitHub servers, so the font serving takes place on another server. The loading itself is quite simple; kind of like using Google Web Fonts (but with more customization options—we'll get to that later).

Suppose you want to use a font that's in the catalog, for example, TeX Gyre Heros, and only in regular weight.
The stylesheet URL would be structured like this:

//brick.freetls.fastly.net/TeX+Gyre+Heros:400

And if you also want to load EB Garamond regular and italic, you can do that too:

//brick.freetls.fastly.net/TeX+Gyre+Heros:400/EB+Garamond:400,400i

Big shoutout to Fastly, whose backing makes everything a lot faster, and Linode, for providing a reliable origin server!

Is it actually better?

You can see for yourself (best comparison is in Chrome; Firefox seems to render all fonts pretty well, though the difference is still clearly visible):

Take note of:

  • Font rendering and smoothing
  • Ligatures: the fi ligature in the title
  • Kerning: the Ve pair in Vestibulum
  • Character sets: although not demonstrated in the previews, Brick fonts include the entire character set that came with the original

Fonts used in the previews:

  • EB Garamond (body text)
  • Libre Baskerville (header and link)

Contributing

For contributing guidelines and instructions, please see the wiki page.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].