Font Library: Preview images are not displayed correctly on the Install Fonts tab

t-hamano commented 6 months ago

Description

When accessing the "Install Fonts" tab of the font library and accessing a font with variations, the preview image does not appear to be displayed correctly.

Below is a screenshot when accessing the "Afacad" font. Note that the format of the displayed preview is {FontName} {FontWeightNumber} {FontStyleName}.

Below is the font selected in the Library tab after it has been installed:

On the other hand, if you download this font from Google Fonts and upload all variations from the Upload tab, you will see something like this. Note that the format of the displayed preview is {FontName} {FontWeightName} ({FontStyleName}).

I feel uncomfortable with this discrepancy.

My understanding is that if we access Google Fonts from the Install Fonts tab, the preview you see is an SVG image rather than the actual text, and it is hosted on an external server. I am concerned that the file name and SVG image for this image may not be generated correctly.

Step-by-step reproduction instructions

Access the Font Library modal and open the "Install Fonts" tab.
Access fonts with several variations and check preview images.
Download the same font from the Google Fonts site.
Upload that font from the "Upload" tag.
Check the preview of the installed fonts in the "Library" tab.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

t-hamano commented 6 months ago

After further investigation, I think there is a difference in the logic that generates the preview text and preview image.

Preview text: Generated in gutenberg.

https://github.com/WordPress/gutenberg/blob/1d7407b01a8c8d8b5e8ed61a1c102b2aa2595fa5/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js#L31

Preview image: Generated by a script in the google-fonts-to-wordpress-collection repository

https://github.com/WordPress/google-fonts-to-wordpress-collection/blob/ac4ddf760d4924a8b9fa215ae4fe7259bbd16f59/src/generate_font_previews.js#L111-L113

const text = isAFamilyPreview
    ? family.name
    : `${ family.name } ${ face.fontWeight } ${ face.fontStyle }`;

t-hamano commented 6 months ago

I have also filed an issue in the google-fonts-to-wordpress-collection repository: https://github.com/WordPress/google-fonts-to-wordpress-collection/issues/23

WordPress / gutenberg