Make WordPress Core

Opened 9 months ago

Closed 3 months ago

#59870 closed defect (bug) (invalid)

Text does not take the Local Fonts(Globally set)

Reported by: elurie's profile elurie Owned by:
Milestone: Priority: normal
Severity: normal Version: 6.4
Component: Editor Keywords: reporter-feedback has-testing-info close
Focuses: Cc:

Description

Bug Report

Description

Describe the bug.

Environment

  • WordPress: 6.4.1
  • PHP: 8.2.6
  • Server: nginx/1.22.0
  • Database: mysqli (Server: 10.3.17-MariaDB-1:10.3.17+maria~bionic / Client: mysqlnd 8.2.6)
  • Browser: Chrome 119.0.0.0 (macOS)
  • Theme: TT4 Child 1.0.0
  • MU-Plugins: None activated
  • Plugins:
    • Create Block Theme 1.13.3
    • Gosign — Gallery Box Block 2.0.1
    • Gutenberg 17.0.0
    • Imsanity 2.8.3
    • Kadence Blocks - PRO Extension 2.0.16
    • Kadence Blocks – Gutenberg Blocks for Page Builder Features 3.1.24
    • Meow Gallery 5.0.6
    • Meow Lightbox 5.0.7
    • WordPress Beta Tester 3.5.5

Steps to Reproduce

  1. add paragraph or heading h2 thru h6 text (should be Optima (h1 is Murberry and works fine)
  2. 🐞 Bug occurs.

Expected Results

  1. ✅ What should happen. Text entered on a page should be Optima, a local font added with the 'Create Block Theme" plugin>Manage Fonts, and set in global settings as the default body font and the default Headings font. Then h1 is Murberry, and that works fine.

Actual Results

  1. ❌ What actually happened. Some other font is used, maybe the System font Have to set each paragraph and heading block text to the global setting.e.g. Optima is default heading font, but text is not in Optima. Have to change it each paragraph.

Attachments (5)

Screenshot 2023-11-09 at 12.28.32 PM.png (74.7 KB) - added by elurie 9 months ago.
Global settings for headings
Screenshot 2023-11-09 at 12.30.22 PM.png (86.1 KB) - added by elurie 9 months ago.
Global Settings for h1
Arsenal -in-the-site-editor.png (314.5 KB) - added by hellofromTonya 8 months ago.
Test Report: Arsenal font renders in the Site Editor
Arsenal-in-the-frontend.png (325.4 KB) - added by hellofromTonya 8 months ago.
Test Report: Arsenal font renders in the front-end
59870-h1-h2-fonts.gif (3.2 MB) - added by hellofromTonya 8 months ago.
Test Report: Using h1 as Playfair Display and h2-h6 as Arsenal, works - cannot reproduce the issue.

Change History (12)

@elurie
9 months ago

Global settings for headings

@elurie
9 months ago

Global Settings for h1

#1 @desrosj
8 months ago

  • Component changed from Text Changes to Editor
  • Keywords reporter-feedback added

@elurie Thanks for this report! Are you able to reproduce this issue on a fresh install of WordPress with your child theme active?

Also, could you share the theme.json file for your child theme?

@hellofromTonya
8 months ago

Test Report: Arsenal font renders in the Site Editor

@hellofromTonya
8 months ago

Test Report: Arsenal font renders in the front-end

#2 @hellofromTonya
8 months ago

  • Keywords has-testing-info added

Reproduction Report

Environment

  • OS: macOS 14.1.1
  • Web Server: Nginx
  • PHP: 7.4.30
  • WordPress: 6.4.1.
  • Browser: Safari 15.4
  • Theme: TT4 Child (created from Create Block Theme)
  • Active Plugins:
    • Create Block Theme
    • Gutenberg 17.0.1
  • Font: Arsenal font

I do not have access to Optimal, which is a premium font. So instead, I downloaded the Arsenal font from Google Fonts.

Setup Steps

  1. Install and activate Create Block Theme plugin.
  2. Create the TT4 child theme:
    1. Go to Appearance > Create Block Theme.
    2. Trigger the Generate button.
    3. Go to Appearance > Themes.
    4. Trigger the "Add New Theme" button.
    5. Trigger the "Upload Theme" button.
    6. Drop and drag the child theme zip file.
    7. Trigger the "Install Now" button.
    8. Then activate the child theme.
  3. Install Gutenberg 17.0.x plugin (to more closely simulate the reported environment setup):
    1. Navigate here to its plugin page on wp.org.
    2. Select 17.0.1 in the version to download select field.
    3. Trigger the Download button.
    4. In your test site, navigate to Plugins > Add New Plugin > Upload Plugin.
    5. Drop and drag the zip file.
    6. Trigger the "Install Now" button.
    7. The activate the Gutenberg plugin.
  4. Install the font:
    1. Go to Google Fonts and download the Arsenal font.

Steps to Reproduce

  1. In your browser, open its dev tools and navigate to the Network tab.
  2. Go to Appearance > Editor.
  3. Click/select the content area to open the sidebar.
  4. Go to Styles > Typography > Headings.
  5. In the "Font" selector, select Arsenal.
  6. In the "Appearance" selector, you can leave it as Default or select "Bold Italic" to make it stand out more.
  7. Trigger the "Save" button to save the customizations.
  8. Go to Posts > Add New Post.
  9. Add a paragraph and header h2 blocks.

Expected Results

In the Site Editor, Post editor, and the front-end:

  • ✅ The Arsenal ttf file show as 200 status in your browser's DevTools Network tool.
  • ✅ The h2 block should render like it does on Google Fonts.

Actual Results

In the Site Editor, Post editor, and the front-end:

  • ✅ The Arsenal ttf file does show as 200 status in your browser's DevTools Network tool.
  • ✅ The h2 block renders and looks the same as on Google Fonts.

❌ Could not reproduce the reported issue.

Additional Notes

  • Did not test with all of the plugins listed in the reporter's setup.
  • Gutenberg 17.0.0 was not available in the download list on wp.org.
  • Optimal font is a premium font. I used a Google Font.

Supplemental Artifacts

Last edited 8 months ago by hellofromTonya (previous) (diff)

@hellofromTonya
8 months ago

Test Report: Using h1 as Playfair Display and h2-h6 as Arsenal, works - cannot reproduce the issue.

#3 @hellofromTonya
8 months ago

Reproduction Report 2

Testing with h1 defined as one font and h2-h6 as another font.

Environment

  • OS: macOS 14.1.1
  • Web Server: Nginx
  • PHP: 7.4.30
  • WordPress: 6.4.1.
  • Browser: Safari 15.4
  • Theme: TT4 Child (created from Create Block Theme)
  • Active Plugins:
    • Create Block Theme
    • Gutenberg 17.0.1
  • Headings Fonts:

I do not have access to Optimal or Al Murberry, which these are premium fonts. So instead, I downloaded the Arsenal and Playflair Display fonts from Google Fonts.

Setup Steps

1-3 same as above.

  1. Install the font:
    1. Download the Google Fonts to your local machine (links above).
    2. In your test site, go to Appearance > Manage Theme Fonts.
    3. Trigger the "Add Local Font" button.
    4. Drop and drag each font.

Steps to Reproduce

  1. In your browser, open its dev tools and navigate to the Network tab.
  2. Go to Appearance > Editor.
  3. Click/select the content area to open the sidebar.
  4. Go to Styles > Typography > Headings.
  5. Set the fonts:
    1. Set "All":
      1. In the "Font" selector, select Arsenal.
      2. In the "Appearance" selector, you can leave it as Default or select "Bold Italic" to make it stand out more.
    2. Set H1:
      1. In the "Font" selector, select Playfair Display.
      2. In the "Appearance" selector, select "Bold Italic" to make it stand out more.
  6. Trigger the "Save" button to save the customizations.
  7. Go to Posts > Add New Post.
  8. Add a paragraph and header h2 blocks.

Expected Results

In the Site Editor, Post editor, and the front-end:

  • ✅ The Arsenal and Playflair ttf files should show as 200 status in your browser's DevTools Network tool.
  • ✅ The h1 block should look like Arsenal on the Google Fonts site.
  • ✅ The h2 block should look like Playfair Display on the Google Fonts site.

Actual Results

In the Site Editor, Post editor, and the front-end:

  • ✅ The Arsenal and Playflair ttf files show as 200 status.
  • ✅ The h1 block look like Arsenal on the Google Fonts site.
  • ✅ The h2 block look like Playfair Display on the Google Fonts site.

❌ Could not reproduce the reported issue.

Additional Notes

  • Did not test with all of the plugins listed in the reporter's setup.
  • Gutenberg 17.0.0 was not available in the download list on wp.org.
  • Optimal and Al Murberry fonts are premium fonts. I used Google Fonts for these tests.

Supplemental Artifacts

See it in action in 59870-h1-h2-fonts.gif.

#4 @hellofromTonya
8 months ago

Hello @elurie,

I'm not able to reproduce the issue you're experiencing. The fonts you mention are premium fonts that I don't have access to for the testing. But in testing 2 different fonts (see test reports above), I was not able to reproduce the issue.

I'm wondering what type of font file these are - ie ttf, woff2, etc.

When you added each font via Appearance > Manage Theme Fonts > "Add Local Font" button, did the fonts render correctly in the Manage Theme Fonts preview window?

Can you check and comment here with what files are in your TT4 child theme's asset/fonts/ directory please? For example, here are the font files I added in my test reports:

arsenal_italic_700.ttf
arsenal_normal_700.ttf
playfair-display_italic_400-900.ttf
playfair-display_normal_400-900.ttf

Thank you :)

Last edited 8 months ago by hellofromTonya (previous) (diff)

This ticket was mentioned in Slack in #core by jorbin. View the logs.


7 months ago

#6 @jorbin
7 months ago

  • Keywords close added
  • Milestone changed from Awaiting Review to Future Release

Based on the inabiity to reporduce and no further information, I'm adding the close tag. If there are further instruction or information, please supply it otherwise this should be closed as invalid.

Moving out of awaiting review since this has been triaged.

#7 @hellofromTonya
3 months ago

  • Milestone Future Release deleted
  • Resolution set to invalid
  • Status changed from assigned to closed

Given I was unable to reproduce and it's been a close candidate for 5 months with no additional reports or further guidance, closing it as invalid.

@elurie if this problem persists, please reopen and provide more information (see my questions here). More information helps contributors reproduce the issue which will help in the resolution process. Thank you :)

Note: See TracTickets for help on using tickets.