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

[Fonts API] Remove local() from @font-face styles. #47254

Merged
merged 1 commit into from
Jan 19, 2023

Conversation

hellofromtonya
Copy link
Contributor

Fixes #42190

Core Trac https://core.trac.wordpress.org/ticket/57430

What?

Removes adding local() as a @font-face src.

Why?

From the issue:

The problem is that by taking the $font_familiy name here, we don't consider that the user may have installed the font from separate files to bold, medium, light, etc. And those files should be listed as different local files.

From the Trac ticket:

loading the local font file can lean to unexpected compatibility issues due to version or locale mismatches of the font.

Testing Instructions

Testing instructions are in the issue's description. The expected results:

Before the PR:

@font-face {
  font-family: "El Messiri";
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: local("El Messiri"),
    url("https://your-host.com/wp-content/themes/your-theme/assets/fonts/static/ElMessiri-Regular.ttf")
      format("truetype");
}
@font-face {
  font-family: "El Messiri";
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: local("El Messiri"),
    url("https://your-host.com/wp-content/themes/your-theme/assets/fonts/static/ElMessiri-Bold.ttf")
      format("truetype");
}

after the PR:

@font-face {
  font-family: "El Messiri";
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url("https://your-host.com/wp-content/themes/your-theme/assets/fonts/static/ElMessiri-Regular.ttf")
      format("truetype");
}
@font-face {
  font-family: "El Messiri";
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: url("https://your-host.com/wp-content/themes/your-theme/assets/fonts/static/ElMessiri-Bold.ttf")
      format("truetype");
}

@hellofromtonya
Copy link
Contributor Author

@Luehrsen Are you available to test this?

@aristath aristath merged commit 7965df8 into trunk Jan 19, 2023
@aristath aristath deleted the fix/fonts-api/remove-local-from-font-face branch January 19, 2023 10:53
pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Feb 13, 2023
…nts_handler().

Removes adding `local()` as a `@font-face` `src` within `_wp_theme_json_webfonts_handler()`.

Why?

To fix font incompatibilities when a user has the font-family locally installed on their viewing computer or device. It's unknown if all of the font-face variations specified by theme.json and/or global styles are:

* installed on the user's computer/device.
* and in one file or multiple files.

The previous implementation used the `src` specified when registering the font with the API. That src will likely vary from user computer/device to user computer/device.

To avoid these unknowns which could cause incompatibilities or styling issues, this changeset removes adding `local()` to the generated font-face CSS styles.

References:
* [WordPress/gutenberg#47254 Gutenberg PR 47254]

Follow-up to [53282].

Props luehrsen, aristath, ehtmlu, hellofromTonya, wetah.
Fixes #57430.

git-svn-id: https://develop.svn.wordpress.org/trunk@55314 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Feb 13, 2023
…nts_handler().

Removes adding `local()` as a `@font-face` `src` within `_wp_theme_json_webfonts_handler()`.

Why?

To fix font incompatibilities when a user has the font-family locally installed on their viewing computer or device. It's unknown if all of the font-face variations specified by theme.json and/or global styles are:

* installed on the user's computer/device.
* and in one file or multiple files.

The previous implementation used the `src` specified when registering the font with the API. That src will likely vary from user computer/device to user computer/device.

To avoid these unknowns which could cause incompatibilities or styling issues, this changeset removes adding `local()` to the generated font-face CSS styles.

References:
* [WordPress/gutenberg#47254 Gutenberg PR 47254]

Follow-up to [53282].

Props luehrsen, aristath, ehtmlu, hellofromTonya, wetah.
Fixes #57430.
Built from https://develop.svn.wordpress.org/trunk@55314


git-svn-id: http://core.svn.wordpress.org/trunk@54847 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot pushed a commit to gilzow/wordpress-performance that referenced this pull request Feb 13, 2023
…nts_handler().

Removes adding `local()` as a `@font-face` `src` within `_wp_theme_json_webfonts_handler()`.

Why?

To fix font incompatibilities when a user has the font-family locally installed on their viewing computer or device. It's unknown if all of the font-face variations specified by theme.json and/or global styles are:

* installed on the user's computer/device.
* and in one file or multiple files.

The previous implementation used the `src` specified when registering the font with the API. That src will likely vary from user computer/device to user computer/device.

To avoid these unknowns which could cause incompatibilities or styling issues, this changeset removes adding `local()` to the generated font-face CSS styles.

References:
* [WordPress/gutenberg#47254 Gutenberg PR 47254]

Follow-up to [53282].

Props luehrsen, aristath, ehtmlu, hellofromTonya, wetah.
Fixes #57430.
Built from https://develop.svn.wordpress.org/trunk@55314


git-svn-id: https://core.svn.wordpress.org/trunk@54847 1a063a9b-81f0-0310-95a4-ce76da25c4cd
VenusPR added a commit to VenusPR/Wordpress_Richard that referenced this pull request Mar 9, 2023
…nts_handler().

Removes adding `local()` as a `@font-face` `src` within `_wp_theme_json_webfonts_handler()`.

Why?

To fix font incompatibilities when a user has the font-family locally installed on their viewing computer or device. It's unknown if all of the font-face variations specified by theme.json and/or global styles are:

* installed on the user's computer/device.
* and in one file or multiple files.

The previous implementation used the `src` specified when registering the font with the API. That src will likely vary from user computer/device to user computer/device.

To avoid these unknowns which could cause incompatibilities or styling issues, this changeset removes adding `local()` to the generated font-face CSS styles.

References:
* [WordPress/gutenberg#47254 Gutenberg PR 47254]

Follow-up to [53282].

Props luehrsen, aristath, ehtmlu, hellofromTonya, wetah.
Fixes #57430.
Built from https://develop.svn.wordpress.org/trunk@55314


git-svn-id: http://core.svn.wordpress.org/trunk@54847 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Wrong local font file being referenced by @font-face generated from theme.json
2 participants