Custom Fonts

With Bricks you can use web-safe fonts, choose from the entire Google fonts library, but also upload and manage your own custom fonts in your WordPress dashboard under “Bricks > Custom Fonts”.

How To Create & Upload Custom Fonts

To create a new custom font go to “Bricks > Custom Fonts” in your WordPress dashboard, and click “Add New”.

First you want to give your custom font a title. This title shows in the font-family dropdown menu in the builder.

Now you just have to upload the files for all the different font variants (font-weight and font-style) you plan to use on your site.

Underneath the font title input you’ll see a list of all your font variants and uploaded files:

Editing your custom font and managing all its font files and variant.

You can see in the example above that I’ve uploaded a .WOFF and .WOFF2 file for the standard font-weight (400) and a “Normal” font style.

If I’d have files for font-weight 700 (bold) and font-style “Italic” I’d click the “Add a font variant” button. Select the font-weight value “700” and the font-style “Italic”, and then upload the correct font files for this variant.

Once you’ve created all relevant font variants and uploaded all font files accordingly, you can save your fonts. And it’ll be available in the builder the next time I load it.

You can also see a font preview when editing your font or on the “Custom Fonts” page.

Supported Font Formats

The following font formats are enabled by default:

  • WOFF (Web Open Font Format): This is the recommend font format used by all modern browsers. Font data is compressed and therefore loads faster than the same font provided via TrueType or OpenType files. Full support for IE9+.
  • WOFF2 (Web Open Font Format 2.0): TrueType/OpenType font with even better compression than WOFF 1.0. No IE browser support.
  • TTF (TrueType Font): Uncompressed font data, but partial IE9+ support.

The recommended font format is WOFF, with a current browser support of 98.26%, and full support for IE9+.

How To Enable More Font Formats

If you need to support IE8 you can programatically enable the EOT font format (or any other font format) by adding the following code to your Bricks child theme:

add_filter( 'bricks/custom_fonts/mime_types', function( $mime_types ) {
  // Enable EOT font format for <IE9 browser support
  array_unshift( $mime_types, ['eot' => 'font/eot'] );
  
  return $mime_types;
} );

Once you’ve created at least one custom font a “Custom Fonts” section with all your custom fonts will show underneath the “Standard Fonts” in any “font-family” setting like so:

Pro Tip: How To Become GDPR Compliant By Hosting Google Fonts Yourself

When you are using a Google Font on your website, you have to get a consent from your website visitor before displaying the font.

You can avoid this whole issue by downloading all relevant font variants for the Google Fonts you want to use on your site, and then upload them as custom fonts in Bricks 🙂

Free Fonts Resources