• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Amethyst Website Design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

Website Design Fonts

Use Open Source Brick Webfonts in WordPress

April 29, 2014 Updated on December 2, 2020 Marcy Diaz

Share this post:

TwitterFacebookPinterestLinkedInEmail

Google Fonts and Adobe Edge Web Fonts have made websites more interesting and engaging with the multitude of open source fonts, but the more fonts used, the slower a website loads. To compensate for this, web fonts are usually modified and compressed. Brick means to change this with their motto, “Webfonts that actually look good.” They serve fonts in WOFF format that are clones of the originals. It also helps that they are served through Fastly’s CDN and supported by Linode.

Brick Webfonts

You can see a comparison of font rendering between Brick and Google on the Brick Github page, which also details how to compare the rendering between the two font services.

Currently there is only a subset of the available open source web fonts at Brick; you can preview them in the font catalogue. A URL builder is planned which will make using them easier.

How to Use Brick Fonts

The general format to add the font stylesheet is:

<link rel="stylesheet" href="//brick.freetls.fastly.net/Font+Name:weights[:flags]/Font+Name...">

You would add this to your website <head>.

Let’s say you want to use Alegreya and Alegreya Sans, and you want to use medium (400) and bold (700) weights of Alegreya for headings. You also want to use Alegreya Sans in lighter medium and bold weights in both normal and italic for the body type – 300,300i,700,700i.

The stylesheet link would be:

<link rel="stylesheet" href="//brick.freetls.fastly.net/Alegreya:400,700/Alegreya+Sans:300,300i,700,700i">

Note that you use the font name, as listed in the catalogue, with a + between words in the font name. There is a / to separate the different fonts, and the weights are listed after a colon after each font name.

How to Use Brick Webfonts in WordPress

In WordPress, it’s best to enqueue the web font stylesheet in your functions.php. You would add this:

<?php
// Note: Add only code below to your functions.php

// Enqueue Font Styles
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
function my_enqueue_scripts() {
    wp_register_style( 'my_brick_fonts', '//brick.freetls.fastly.net/Alegreya:400,700/Alegreya+Sans:300,300i,700,700i' );
    wp_enqueue_style( 'my_brick_fonts' );
}

How to Add the Font CSS to Your Child Theme

Now you can add the CSS to your child theme styles.css.

body {
    font-family: 'Alegreya Sans', sans-serif;
    font-weight: 300;
}

strong {
    font-weight: 700;
}

h1,
h2,
h5,
h6 {
    font-family: Alegreya, serif;
    font-weight: 400;
}

h3,
h4 {
    font-family: Alegreya, serif;
    font-weight: 700;
}

Note that the font name in the stylesheet is as listed in the catalogue, but with quotes around it.

There are many choices for using open source web fonts to add interest to your WordPress website.

Share this post:

TwitterFacebookPinterestLinkedInEmail

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!

Contact Marcy »

___

Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design
PO Box 94782
Phoenix AZ 85070

Phone: 602.759.0501
Email:

Contact Form
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework

This site uses cookies for the best browsing experience. By continuing to use this site, you accept our Cookie Policy »OK, got it!