Removes the star icon font

[erikyo]

All Submissions:

• Have you followed the WooCommerce Contributing guideline?
• Does your code follow the WordPress' coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This Pr will replace the WooCommerce font with a new one that is the merge of the previous WooCommerce Font and the Star font. In this way we need to load only a single font to get the same result.

Closes #31490

How to test the changes in this Pull Request:

1. Rebuild assets (this is mandatory because i've changed _font.scss and the other theme related )
2. To know if the patch is working delete all the Star.* fonts from /woocommerce/assets/fonts/star.woff, if the star icon doesn't disappear the font family was correcty replaced. rel to _fonts.scss
3. Check in DevTools under the network panel, filtering fonts. Star.* should not be present
4. While testing .svg font remember that are allowed only before chrome 38, and actually works only in Safari. source. The reason was a poor rendering quality, and in addition, some features are missing eg. ligatures. Same for the eot font that can be tested only with IE <= 11

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Removes star font

Comment

Testing Instructions

1. Begin by setting up a fresh WP/WooCommerce installation, followed by modifying the theme you have selected.
2. Access the font files from this location and store them within a folder titled "fonts." Integrate this folder into the root directory of your active theme.
3. Integrate the following code into your function.php file:

function add_a_font() {
?>
  <style>
  @font-face {
      font-family: 'new-star';
      src: url('fonts/WooCommerce.woff2') format('woff2'),
      url('fonts/WooCommerce.woff') format('woff'),
      url('fonts/WooCommerce.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
  }
  </style>
<?php 
}
add_action( 'wp_head', 'add_a_font' );

4. Proceed to your website and, using developer tools, inspect a WooCommerce page where the star font is displayed. This may vary depending on your chosen theme, but typically, many themes showcase this font within the review tab of the product page. Once you've located the "star" on your page, toggle the "new-star" font using the developer tools. Verify that there are no discernible changes when adding or removing the "new-star" font. (For thoroughness, please ensure your browser is zoomed in to at least 200% to confirm consistency in shape, size, etc.)

thanks!

[erikyo]

as @peterfabian had pointed out, the shape of the star was not sized and aligned with the original due a different size and center. I fixed by shifting the Y center -45pt and resizing of 101,2% (compared to the "autohint" value resulting after import the font in a larger "slot")

green -> star.ttf | yellow -> new WooCommerce.ttf

[peterfabian]

Hey, thanks for the updated PR!

Do you know about any eot file viewers I could use to check the changes? It seems a bit odd to me that star.eot is just 1.6KB, but WooCommerce.eot increased by 26KB.

Taking a step back here a bit, since WP no longer supports IE, based on this post, it seems we don't need to link to eot file anymore. The eot file is fairly large and since there is no format hint, the font file will always get downloaded (based on this docs).

I'd say we can go with the "Slightly deeper browser support" here and then we can also remove the SVG and embedded-opentype:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}

This also means we probably no longer need to change the WooCommerce.eot and SVG file, so only ttf, woff and woff2 needs an update.

Even Twenty Twenty theme from 2 years ago only includes woff2 format, so it should be safe for us to reduce the coverage. What do you think?

[erikyo]

Do you know about any eot file viewers I could use to check the changes? It seems a bit odd to me that star.eot is just 1.6KB, but WooCommerce.eot increased by 26KB.

Sincerely I haven't find no one that work 😅... I've tested the font on a real page with windows 7 / internet explorer to get sure it works but I didn't realize it had become so big. The reason could be some settings used during the conversion with the linux package called "eot-utils" and, maybe, by changing something I can "compress" it more.

This also means we probably no longer need to change the WooCommerce.eot and SVG file, so only ttf, woff and woff2 needs an update.

You are right! The eot font is completely useless in 2022 and could be safely removed. Nowdays woff2 is the preferred by most of the browser and woff covers all browsers above ie9. About .ttf I don't think it will ever be used but maybe it can be useful for other purposes.
https://caniuse.com/mdn-css_at-rules_font-face_woff

One last thing before i'll update the PR... isn't worth to import the _font.scss file (like here) into all the Twenty-* style? Currently the code @font-face is repeated for each style (the only difference I noticed is the different kind of quotes) but can be imported (and this avoids in the future having to edit all the files as I'm doing now).

[samueljseay]

@peterfabian friendly ping, how should we move forward on this one.

[peterfabian]

Thanks for the ping, and apologies for dropping the ball here. I'll try to have a look at this within a week or so, but this still feels like a fairly low prio enhancement, so it can take a bit of time until I get back to this. Would you mind rebasing it in the meantime @erikyo please?

[github-actions]

Hi ,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[lsinger]

Thanks @erikyo! I left a few comments on a few lines and also have some overarching notes:

• Just like previous reviewers I'm not comfortable with the 290% increase in WooCommerce.eot. What options do we have here? E.g., is there an optimization that we can run?
• When checking out the branch locally, all the star.* files are still there, and indeed I can't fine a commit that would delete them. Is this intentional? If so, what's the rationale here?
• Can you suggest an application that can view eot files? I tried FontForge but it doesn't seem to like these. Before approving these changes I'd like to take a look at all the binary files directly.
• For the review instructions, can you list a few pages / views that I can use to verify the fonts still work as intended?

[erikyo]

Just like previous reviewers I'm not comfortable with the 290% increase in WooCommerce.eot. What options do we have here? E.g., is there an optimization that we can run?

I've edited the font with fontforge that allows to open and export any type of font excluded the eof. For that i converted the font using a linux cli tool... But even I don't know how to read and validate it, there are tools online but they don't read either woo or mine versions of the font.
Anyhow i want to mention that I don't believe that font is relevant anymore, if the problem is the increased file size I suggest deleting it forever

When checking out the branch locally, all the star.* files are still there, and indeed I can't fine a commit that would delete them. Is this intentional? If so, what's the rationale here?

I would not like to delete the files that are used by third-party plugin, some plugin could rely on that font and I would break the existing stuff. the important thing is that that font is not loaded in the frontend (for this i am loading the same font for the "woocommerce" and "star" font-families

Can you suggest an application that can view eot files? I tried FontForge but it doesn't seem to like these. Before approving these changes I'd like to take a look at all the binary files directly.

I think in 2024 by now no one will be able to view that kind of font 😅, maybe only ie old versions, but as in the first answer my suggestion is to remove that font (or if you want, please encode the .ttf file into a .eot with this https://www.w3.org/Tools/eot-utils/ and update my PR)

For the review instructions, can you list a few pages / views that I can use to verify the fonts still work as intended?

You can check the icon in the review tab of the single page and below the product photo in the archive. if I remember correctly some widgets also used that font as the "woocommerce/all-reviews".

To check correctly, I recommend that you create a font called woo1 with this code

@font-face {
	font-family: 'woo1';
	src: url('../fonts/woo1.woff2') format('woff2'),
	     url('../fonts/woo1.woff') format('woff'),
	     url('../fonts/woo1.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

And then enable and disable it to be sure that is perfectly of the same shape/size etc

thanks!

[lsinger]

Anyhow i want to mention that I don't believe that font is relevant anymore, if the problem is the increased file size I suggest deleting it forever

As even WordPress itself doesn't support Internet Explorer anymore -- the only browser to ever have supported EOT font files -- I'd say we remove the file from WooCommerce. 👍

I would not like to delete the files that are used by third-party plugin, some plugin could rely on that font and I would break the existing stuff. the important thing is that that font is not loaded in the frontend (for this i am loading the same font for the "woocommerce" and "star" font-families

Great points -- agreed. 👍 I still think we should stop using the "star" font family even if we leave it as defined -- a few twenty-*.scss still reference it. See below.

I tested the changes and everything seems to work well. However, after searching the monorepo for font-family: star again, I still found SCSS rules that refer to this font family. If we truly want to phase this specialized font family out we should update those as well, don't you think?

I'm also adding @gigitux because there are a few of these references in WooCommerce Blocks and Luigi is listed as the author of at least one of those lines. @gigitux, what do you think -- with the WooCommerce font updated to include the star, can we remove the reference to the "star" font family from WooCommerce Blocks as well?

Peter has moved on to a different team and will not be reviewing this PR.

[erikyo]

If we truly want to phase this specialized font family out we should update those as well

Yep, you are right! I can still find 11 occurrences of that font-family, and you also correct about some are from the woocommerce-block repository (eg. plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating-stars/style.scss).

If this is what you come up with as well, I will proceed with these substitutions

[lsinger]

If this is what you come up with as well

@erikyo yep, that's exactly what I'm seeing as well, even without the *.scss filter. 👍

[erikyo]

I did a final check and realised that in some themes (twenty-nineteen.scss,twenty-nineteen.scss,woocommerce.scss) the font-family was enclosed in quotes, so I replaced those as well.

The only remaining occurrences are in the css (generated, I won't change it), I can't find that font anywhere else now.

[gigitux]

Thanks, @erikyo, for working on this!

I'm also adding @gigitux because there are a few of these references in WooCommerce Blocks and Luigi is listed as the author of at least one of those lines. @gigitux, what do you think -- with the WooCommerce font updated to include the star, can we remove the reference to the "star" font family from WooCommerce Blocks as well?

I can confirm that everything works okay on WooCommerce Blocks:

Product Filter Block	Single Product Template

As even WordPress itself doesn't support Internet Explorer anymore -- the only browser to ever have supported EOT font files -- I'd say we remove the file from WooCommerce. 👍

I agree with this! Let's remove .oet font given that any modern browser supports it (TIL):

Also, it would be great if you could update the testing instructions according to this documentation!

[lsinger]

Took another look at the changes and tried things out. In my testing everything still works as intended. Let's ship this. 🚢