Managing Fonts in WordPress Block Themes

Website design hinges on typography. WordPress themes often integrate services like Google Fonts, easily managed within the Customizer for classic PHP themes. However, this isn't as straightforward for block themes. While classic theme integration is well-documented, block theme font management lacks similar guidance. This article addresses that gap. Block themes can use Google Fonts, but the registration process differs significantly from traditional methods.

Existing Knowledge

Resources for integrating fonts into block themes were initially scarce. Twenty Twenty-Two, the first default block-based theme, demonstrated using downloaded font files as theme assets. This involved registering files in functions.php and defining bundled fonts in theme.json – a cumbersome two-step process.

Later themes, like Twenty Twenty-Three, simplified this by defining bundled fonts without explicit registration. However, manual font downloads and bundling remain, negating the convenience of hosted fonts served via a CDN.

Recent Developments

The Gutenberg project, a plugin for testing upcoming Block and Site Editor features, offers a solution. Matias Benedetto, Gutenberg's lead architect, highlighted using Google Fonts (or any downloaded fonts) in block themes via the Create Block Theme plugin.

Learn WordPress provides a video overview of this plugin, which simplifies theme creation by offering WordPress UI controls. You can create entire themes, child themes, or style variations without coding or modifying template files. Being authored and maintained by the WordPress.org team, it's currently the best approach for Google Font integration in block themes. Note, however, that it's under active development, so expect changes.

Before exploring this new method, let's review the traditional approach for classic themes.

The Traditional Method

Articles like those from ThemeShaper (2014) and Cloudways illustrate the classic method. The Twenty Seventeen theme exemplifies enqueuing Google Fonts in functions.php:

function twentyseventeen_fonts_url() {
  $fonts_url = '';
  $libre_franklin = _x( 'on', 'libre_franklin font: on or off', 'twentyseventeen' );
  if ( 'off' !== $libre_franklin ) {
    $font_families = array();
    $font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i';
    $query_args = array(
      'family' => urlencode( implode( '|', $font_families ) ),
      'subset' => urlencode( 'latin,latin-ext' ),
    );
    $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
  }
  return esc_url_raw( $fonts_url );
}

Pre-connecting Google Fonts:

function twentyseventeen_resource_hints( $urls, $relation_type ) {
  if ( wp_style_is( 'twentyseventeen-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
    $urls[] = array(
      'href' => 'https://fonts.gstatic.com',
      'crossorigin',
    );
  }
  return $urls;
}
add_filter( 'wp_resource_hints', 'twentyseventeen_resource_hints', 10, 2 );

Drawbacks of the Traditional Method

This method has a significant drawback. A 2022 German court ruling highlighted GDPR violations due to the exposure of visitor IP addresses when enqueuing Google Fonts. This issue is addressed by the Create Block Theme plugin.

Using Google Fonts with Block Themes (The Modern Way)

The modern approach utilizes the Create Block Theme plugin. Set up a local development environment (e.g., using Flywheel Local) and install the Theme Test Data and Create Block Theme plugins.

Navigate to Appearance → Manage theme fonts. This screen lists defined fonts and offers options to:

• Add Google fonts: Adds fonts directly from the Google Fonts API.
• Add local fonts: Adds uploaded font files.

Using a blank theme (e.g., Emptytheme, renamed for clarity), adding a Google Font (like Inter) automatically downloads and stores it in the theme's assets/fonts folder, updating theme.json:

View theme.json code

function twentyseventeen_fonts_url() {
  $fonts_url = '';
  $libre_franklin = _x( 'on', 'libre_franklin font: on or off', 'twentyseventeen' );
  if ( 'off' !== $libre_franklin ) {
    $font_families = array();
    $font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i';
    $query_args = array(
      'family' => urlencode( implode( '|', $font_families ) ),
      'subset' => urlencode( 'latin,latin-ext' ),
    );
    $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
  }
  return esc_url_raw( $fonts_url );
}

The font is then available in the Site Editor's Global Styles.

Adding local fonts works similarly, simplifying the process compared to manual functions.php modifications. Font removal is also handled within the plugin's interface.

Future Developments

The "Font Manager" feature is planned for WordPress core, offering similar functionality.

Conclusion

The Create Block Theme plugin streamlines font management in WordPress block themes, providing a user-friendly and GDPR-compliant solution. It simplifies adding, removing, and managing fonts without direct code interaction.

Further Reading

(List of resources remains the same, reformatted for better readability)

WordPress Font Management:

• How to add typographic fonts to WordPress block themes (Theme Shaper)
• How to add Google fonts to WordPress themes (Theme Shaper)
• How to Use Google Fonts With WordPress? (Cloudways)
• Manage your block theme fonts with Create Block Theme (Learn WordPress)
• Using Create Block Theme (WordPress.tv)

GitHub Issues:

• Global Styles/Typography: Managing font sets (#45271)
• Font manager (#46332)

European GDPR Requirements:

• German Court Fines Website Owner for Violating the GDPR by Using Google-Hosted Fonts (WPTavern)
• Complying with GDPR when using Google Fonts (Make WordPress Themes)
• German court awards user €100 in damages against website operator for using Google Fonts (ePrivacy Blog)
• Bunny Fonts (CSS-Tricks)

The above is the detailed content of Managing Fonts in WordPress Block Themes. For more information, please follow other related articles on the PHP Chinese website!