[wp-trac] [WordPress Trac] #63569: It should be possible to register font families with external sources

[WordPress Trac]

#63569: It should be possible to register font families with external sources
-----------------------------+-----------------------------
 Reporter:  andrewleap       |      Owner:  (none)
     Type:  feature request  |     Status:  new
 Priority:  normal           |  Milestone:  Awaiting Review
Component:  Themes           |    Version:  trunk
 Severity:  normal           |   Keywords:
  Focuses:                   |
-----------------------------+-----------------------------
 If we load fonts from an external source, we should be allowed to add the
 font families and font faces to theme.json

 Currently, declaring a font face with no or empty source will result in an
 error being printed on the front end. When the source is empty, this is
 handled gracefully in the site editor.

 It should also simply skip the font face declaration on the front end too
 (it currently does this, but not without printing an error)

 **Relevant snippets**

 **Gutenberg**

 `/packages/edit-site/src/components/global-styles/font-library-
 modal/utils/index.js`


 {{{
 /*
  * Loads the font face from a URL and adds it to the browser.
  * It also adds it to the iframe document.
  */
 export async function loadFontFaceInBrowser( fontFace, source, addTo =
 'all' ) {
         let dataSource;

         if ( typeof source === 'string' ) {
                 dataSource = `url(${ source })`;
                 // eslint-disable-next-line no-undef
         } else if ( source instanceof File ) {
                 dataSource = await source.arrayBuffer();
         } else {
                 return;
         }

         const newFont = new window.FontFace(
                 formatFontFaceName( fontFace.fontFamily ),
                 dataSource,
                 {
                         style: fontFace.fontStyle,
                         weight: fontFace.fontWeight,
                 }
         );

         const loadedFace = await newFont.load();

         if ( addTo === 'document' || addTo === 'all' ) {
                 document.fonts.add( loadedFace );
         }

         if ( addTo === 'iframe' || addTo === 'all' ) {
                 const iframeDocument = document.querySelector(
                         'iframe[name="editor-canvas"]'
                 ).contentDocument;
                 iframeDocument.fonts.add( loadedFace );
         }
 }
 }}}

 **Core**

 `/wp-includes/fonts/class-wp-font-face.php`


 {{{
 if ( empty( $font_face['src'] ) || ( ! is_string( $font_face['src'] ) && !
 is_array( $font_face['src'] ) ) ) {
         // @todo replace with `wp_trigger_error()`.
         _doing_it_wrong(
                 __METHOD__,
                 __( 'Font src must be a non-empty string or an array of
 strings.' ),
                 '6.4.0'
         );
         return false;
 }
 }}}

 **The following should be possible:**

 `/wp-content/theme/functions.php`

 {{{
 // Enqueue Typekit embed link on both front-end and editor
 add_action( 'wp_enqueue_scripts', 'afi_enqueue_typekit' );
 add_action( 'enqueue_block_editor_assets', 'afi_enqueue_typekit' );
 function afi_enqueue_typekit() {
         $project_id = get_option( 'afi_typekit_id' );
         if ( $project_id ) {
                 wp_enqueue_style( 'afi-adobe-fonts',
 "https://use.typekit.net/{$project_id}.css", array(), null );
         }
 }
 }}}


 `wp-content/theme/theme.json`


 {{{
 {
         "$schema": "https://schemas.wp.org/trunk/theme.json",
         "version": 3,
         "settings": {
                 "typography": {
                         "fontFamilies": [
                                 {
                                         "name": "Proxima Nova",
                                         "slug": "proxima-nova",
                                         "fontFamily": "Proxima Nova, sans-
 serif",
                                         "fontFace": [
                                                 {
                                                         "fontWeight": "200
 800",
                                                         "fontStyle":
 "normal",
                                                         "fontFamily":
 "Proxima Nova"
                                                 }
                                         ]
                                 }
                         ]
                 }
         }
 }

 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63569>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform