Webfonts API: using a name instead of fontFamily

[vincequeiroz]

Description

I created an Adobe TypeKit provider, but instead of using the font family name, they're using a slug.

Something like that:

@font-face {
  font-family:"acumin-pro";
  src:url("") format("woff2"), url("") format("woff"),url("") format("opentype");
  font-display:auto; font-style:italic; font-weight:400; font-stretch:normal;
}

https://fonts.adobe.com/docs/api/css_names

The way how the api in the gutenberg_add_registered_webfonts_to_theme_json method creates the path "settings.typography.fontFamilies.theme" ignores the name property. This is the result:

What is your proposed solution?

I propose to allow the name parameter as a valid props:

$valid_props = array(
    'ascend-override',
    'descend-override',
    'font-display',
    'font-family',
    'font-stretch',
    'font-style',
    'font-weight',
    'font-variant',
    'font-feature-settings',
    'font-variation-settings',
    'line-gap-override',
    'size-adjust',
    'src',
    'unicode-range',

    // Exceptions.
        'name',
    'provider',
);

https://github.com/WordPress/gutenberg/blob/trunk/lib/experimental/class-wp-webfonts.php#L251-L269

And change the construction, adding a check, something like that:

$data['settings']['typography']['fontFamilies'][] = array(
    'fontFamily' => str_contains( $family_name, ' ' ) ? "'{$family_name}'" : $family_name,
    'name'       => $font_faces_for_family[0]['name'] ?? $family_name,
    'slug'       => $slug,
    'fontFace'   => $font_faces,
);

https://github.com/WordPress/gutenberg/blob/trunk/lib/experimental/register-webfonts-from-theme-json.php#L166-L171

With these small changes, we were able to see a name instead of the font family.

[t-hamano]

Sorry for the delay in confirming this issue.

Font Library (previously called Wenfonts API) was shipped in WP6.5. And the method gutenberg_add_registered_webfonts_to_theme_json no longer exists. Is this problem also occurring in WP6.5?

By the way, there is #55239, which proposes allowing Typekit fonts to be added to the Font Library.