Easy access to open source typography services has made the web a more beautiful place. Google’s vast library of fonts is free, fast-loading and hosted on high performing servers, which has resulted in ubiquitous use across the web.
But have you ever looked at Google fonts and wondered why they appear to be a bit wan, almost threadbare? This is because they are modified and compressed for performance and the output is far from a high quality rendering.
Brick: An Alternative to Google Fonts
Brick is an open source typography project that aims to improve the quality of fonts used on the web. It serves fonts that are clones of the original. The fonts are converted without modification to WOFF format with no quality lost.
Comparison Between Brick and Google Fonts
The tagline for Brick is “Webfonts that actually look good.” But how much better are they? Here’s a quick comparison of Brick vs. Google Fonts, using EB Garamond (body text) and Libre Baskerville (header and link):
To the casual observer, these examples are going to look very similar. But here’s what you need to look out for when comparing:
- 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
The kerning and ligature differences alone should slap you in the face. Overall, you can see how Brick comes much closer to the original quality of rendered type.
Brick Fonts are Unmodified and Fast
Brick provides higher quality fonts because it doesn’t modify or subset the fonts in any way. They are rendered the way they were meant to be seen. This doesn’t mean that you have to compromise on performance. Brick fonts are served through Fastly’s CDN and are supported by Linode hosting.
How to Use Brick Fonts with WordPress
Let’s walk through an example of adding Brick fonts to your WordPress theme. It’s very similar to how you might add Google fonts, except with customization options.
Step 1. Select the font you want to use.
The Brick font catalog is currently preview-only, but the service may be adding a URL builder in the future. It may not always be current, so you might also check out the catalog source.
Step 2: Add the font to your theme’s functions.php file.
Building a font URL involves adding the font name(s) plus the various weights and available italics options that you want to use.
For example, let’s say we want to use the Linux Libertine font (Public Domain licensed) in all available options (400, 600, 700, 400i, 600i, 700i). Here’s how you would structure the URL to call it:
//brick.a.ssl.fastly.net/Linux+Libertine:400,600,700,400i,600i,700i
You would then insert that URL into your function like this:
[php]function mythemeslug_enqueue_styles() {
wp_register_style(‘brickFonts’, ‘//brick.a.ssl.fastly.net/Linux+Libertine:400,600,700,400i,600i,700i’);
wp_enqueue_style( ‘brickFonts’);
}[/php]
Step 3: Update your stylesheet to use the new font.
The last step is to change your text or headlines to use the font you added. Here’s a quick example:
[css]h1, h2, h3, h4, h5, h6 {
font-family: ‘Linux Libertine’, serif;
}[/css]
The result will look something like this:
Using Brick fonts is just as easy as adding fonts from Google Fonts but the quality is much higher. The only disadvantage is that the Brick font library isn’t as large, but the project is open source and anyone is welcome to contribute. You can suggest a font by opening up an issue, add a font via pull request, or support Brick’s creator, Alfred Xing, on Gittip. For more usage tips and information on the project, check out Brick on Github.
I’m a big fan of good fonts and good font combinations.
Thanks for pointing out the finer points of the font comparison – worth knowing.