Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webfonts API: using a name instead of fontFamily #41919

Open
vincequeiroz opened this issue Jun 23, 2022 · 1 comment
Open

Webfonts API: using a name instead of fontFamily #41919

vincequeiroz opened this issue Jun 23, 2022 · 1 comment
Labels
[Feature] Typography Font and typography-related issues and PRs [Type] Enhancement A suggestion for improvement.

Comments

@vincequeiroz
Copy link

vincequeiroz commented Jun 23, 2022

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:

image

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.

image

@annezazu annezazu added [Type] Enhancement A suggestion for improvement. [Feature] Webfonts labels Jun 23, 2022
@annezazu annezazu added [Feature] Typography Font and typography-related issues and PRs and removed [Feature] Fonts API labels Sep 25, 2023
@t-hamano
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Typography Font and typography-related issues and PRs [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

3 participants