[wp-trac] [WordPress Trac] #46370: A proposal for creating an API to register and enqueue web fonts

[WordPress Trac]

#46370: A proposal for creating an API to register and enqueue web fonts
--------------------------------------+-----------------------------------
 Reporter:  jonoaldersonwp            |       Owner:  hellofromTonya
     Type:  feature request           |      Status:  assigned
 Priority:  normal                    |   Milestone:  5.9
Component:  General                   |     Version:
 Severity:  normal                    |  Resolution:
 Keywords:  has-patch has-unit-tests  |     Focuses:  performance, privacy
--------------------------------------+-----------------------------------

Comment (by aristath):

 Testing instructions for the new patch (https://github.com/WordPress
 /wordpress-develop/pull/1736):

 Registering a webont (or collection of webfonts is easy using the
 `wp_register_webfonts` function.
 The code example below registers a variety of webfonts, both from local
 files and google-fonts:

 {{{#!php
 <?php
 /**
  * Plugin Name: WebFonts Test
  */

 add_action(
         'init',
         function() {
                 if ( ! function_exists( 'wp_register_webfonts' ) ) {
                         return;
                 }
                 wp_register_webfonts(
                         array(
                                 array(
                                         'fontFamily' => 'Roboto',
                                         'fontStyle'  => 'normal',
                                         'fontWeight' => '400',
                                         'provider'   => 'google',

                                 ),
                                 array(
                                         'fontFamily' => 'Roboto',
                                         'fontStyle'  => 'italic',
                                         'fontWeight' => '400',
                                         'provider'   => 'google',

                                 ),
                                 array(
                                         'fontFamily' => 'Open Sans',
                                         'fontWeight' => '100',
                                         'provider'   => 'google',

                                 ),
                                 array(
                                         'fontFamily' => 'Festive',
                                         'provider'   => 'google',

                                 ),
                                 array(
                                         'fontFamily' => 'Open Sans',
                                         'fontWeight' => '300',
                                         'provider'   => 'google',

                                 ),
                                 array(
                                         'fontFamily' => 'Open Sans',
                                         'fontWeight' => '400',
                                         'provider'   => 'google',

                                 ),
                                 array(
                                         'fontFamily' => 'Open Sans',
                                         'fontWeight' => '800',
                                         'provider'   => 'google',

                                 ),
                         )
                 );

                 wp_register_webfonts(
                         array(
                                 array(
                                         'fontFamily' => 'Akronim',
                                         'provider'    => 'google',

                                 ),
                                 array(
                                         'fontFamily'   => 'My Font',
                                         'font-display' => 'swap',
                                         'fontStyle'    => 'normal',
                                         'fontWeight'   => '400',
                                         'src'          => array(
 get_template_directory_uri() . '/fonts/font.woff2',
 get_template_directory_uri() . '/fonts/font.woff',
                                         ),
                                         'provider'     => 'local',

                                 ),
                         )
                 );

                 wp_register_webfonts(
                         array(
                                 array(
                                         'font-family'  => 'Source Serif
 Pro',
                                         'font-weight'  => '200 900',
                                         'font-style'   => 'normal',
                                         'font-stretch' => 'normal',
                                         'src'          =>
 get_theme_file_uri( 'assets/fonts/source-serif-pro/SourceSerif4Variable-
 Roman.ttf.woff2' ),
                                         'provider'     => 'local',
                                 ),
                                 array(
                                         'font-family'  => 'Source Serif
 Pro',
                                         'font-weight'  => '200 900',
                                         'font-style'   => 'italic',
                                         'font-stretch' => 'normal',
                                         'src'          =>
 get_theme_file_uri( 'assets/fonts/source-serif-pro/SourceSerif4Variable-
 Italic.ttf.woff2' ),
                                         'provider'     => 'local',
                                 ),
                         )
                 );
         },
         20
 );

 }}}

 The code-snippet from above adds 4 google fonts and 2 locally-hosted
 webfonts. It tests both using `camelCase` and `kebab-case` in the array
 keys.
 The result is `@font-face` rules generated and added inline on the
 frontend, AND the editor. The font-families can be used directly in
 elements, and to test that the easiest method is to edit the styles of an
 element using the browser's inspector and add `font-family: Festive`. Both
 the editor side and the frontend side need to be verified.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/46370#comment:66>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform