How to Use Open Source Brick Fonts With WordPress

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-fontsBrick 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:

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

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:

h1, h2, h3, h4, h5, h6 {
	font-family: 'Linux Libertine', serif;
}

The result will look something like this:

linux-libertine

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.

15 Comments


  1. 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.

    Report


  2. I studied the two examples and my eye just isn’t well trained enough to discriminate fully between the types of fonts (Google and Brick).

    I haven’t had any problems with Google Fonts (they seem to be always available and fast) so, I think I’ll stick with them for the time being.

    Lastly, I appreciate all the initiatives to improve the web’s typography.

    Report


  3. This articles is only missing one thing – a size comparison between google’s offering and Brick’s. Then you’ve got everything you need to make a decision.

    Report


    1. Here’s a quick comparison of the .woff asset load for Libre Baskerville as loaded on the comparison pages linked in this article:

      Brick: 302.9kb
      Google: 91.4kb

      My system didn’t have to download the EB Garamond, but others might, which would add:

      Brick: 217kb
      Google: 27.7kb

      For a grand total of:

      Brick: 519.9kb
      Google: 119.1kb

      Report


      1. Adding 400k to the initial site load? Doesn’t seem worth it to me.
        Would there be a way in CSS to use Google by default, but if they have the Brick version to use that?

        Report


      2. Those are both relatively large fonts with large character sets. The average font size right now is around 75KB.

        Report


      3. Thanks for that info Alfred. Cool service you’re providing here.

        Do you have any information about the character sets supported by each font? I work with products that need to be translate-able so I like that Google Fonts lets me see what character sets (Latin, Cyrillic, etc) are supported. Do the Brick versions offer all the same character sets as the equivalent Google Font?

        Report


  4. HUGE difference between demos in Chrome on Windows 7.

    Google fonts often look awful, Brick fonts actually look decent.

    Report


  5. A nice addition to the tool kit.

    The only issue I’m seeing is the end user license – Open source + Public Domain are fine for contribution but usage wise only Public Domain CC By 0 is compatible with GPL in terms of themes hosted in the WordPress repository.

    Any clarification/link to the actual end user license? GPL, MIT or only CC By X?

    Report


    1. It looks like the license is stored with each font so you can check it out before using it. I looked at a few and they were mostly SIL Open Font License, which I believe is compatible but would love to hear confirmation from someone who has actually addressed the issue.

      Report


    2. As Nate mentioned, the licenses are font-specific. Most of them are SIL, some are Apache, and a couple are LaTeX.

      Report


  6. And there was me thinking that it was just my old laptop making the fonts show up a little threadbare. Can breathe a sigh of relief now so thanks, Sarah. Will definitely be considering Brick Font on sites where sites where text >> images since this should improve the visual experience. With reference to other comments: hopefully one day there will be a compromise between Brick and Google.

    Report


  7. @Nate & @Alex,

    Thanks for clearing that up and pointing in the right direction for the license :)

    Glad to see most of the fonts are under the SIL license and that makes it a relief for us WordPress.org developers – will more than likely switch to Brick for my next theme :)

    Report


  8. Any chance of updating this for the current theme, Twenty Fourteen? I’d appreciate it. John Tranter, Sydney.

    Report

Comments are closed.