Text does not take the Local Fonts(Globally set)

[elurie]

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.

[elurie]

Global settings for headings

[elurie]

Global Settings for h1

[desrosj]

@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]

Test Report: Arsenal font renders in the Site Editor

[hellofromTonya]

Test Report: Arsenal font renders in the front-end

[hellofromTonya]

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

• Front-end Arsenal-in-the-frontend.png​
• Site Editor Arsenal -in-the-site-editor.png​

[hellofromTonya]

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

[hellofromTonya]

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:
  • All: ​Arsenal font
  • h1: ​Playfair Display font

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.

4. 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​.

[hellofromTonya]

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 :)

[jorbin]

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.