Project Zero

Google Fonts

As well as custom style sheets, you can include custom webfonts in your theme.  With the inclusion of theme.json support, WordPress has allowed for users to include fonts in a theme and switch between them in the editor.  At the time of writing this, WordPress natively supports locally embedded fonts, but you can use plugins to add remotely hosted fonts.

WARNING! WARNING! YOU HAVE BEEN WARNED!

While you can use remote webfonts, there have been some issues or concerns with how these fonts interact with privacy laws such as GDPR.  It is up to you to do your own research on this and make your own judgement.

To remove as many issues as possible, Project Zero comes with a locally-hosted copy of Roboto from Google Fonts.  Roboto is released under Apache License 2.0, which is considered fully compatible with GPL v3.

Google Fonts is a library of over 1000 free and open source font families, which can be used for web design and other applications. These fonts are designed by talented type designers and are available in a variety of styles and weights, making it easy to find the perfect fit for your project.

Version 0.3 of Project Zero comes with Roboto.  There are currently three font weights installed – regular (400), 300, and 700 – in both normal and italic type.  References to the .woff(2) files can be found in lines 1 - 50 of css/main.css.  Each reference will look as follows:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('../fonts/google/roboto-v30-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/google/roboto-v30-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

You can replace Roboto with whichever type faces you wish, or remove them entirely.  Roboto is also used within theme.json so you will need to replace those references too.  You can find them on lines 83 - 130, 211, and 256 - 304.

Try this time saver

A good tool to search through and download Google Fonts in a webfont-friendly format is the google-webfonts-helper from Mario Ranftl.  It is an open-source project which you can host yourself if you wish, but you can also use the project site to generate the files for you.

Join the conversation

Your email address will not be published.


This site uses Akismet to reduce spam. Learn how your comment data is processed.