[Fonts API] Make local font asset file URL absolute

[hellofromtonya]

Fixes #50965

What?

Makes all local font asset file URL absolute, rather than local.

Why?

The font asset files are not being loaded within an iframe. Why? The relative URL to the asset files are relative to the iframe's #50875 was merged. By making the URLs absolute, it ensures each font asset file does properly relate to the actual location of the files.

How?

In the WP_Fonts_Provider_Local::compile_src(), the code for making the URLs relative is removed. In this way, all URLs should be absolute, assuming their src path was defined as absolute or it used file:./ placeholder (where the API handles the conversion).

Testing Instructions

Before using 15.8.1

1. Install Gutenberg 15.8.1 and then activate the plugin.
2. Install and activate the Frost theme.
3. Inspecting the font asset files:
   • In your favorite browser, open the dev tools.
   • Go to the "Network".
   • Select to view all "Fonts".
   • If available, disable the browser cache. (Firefox as a checkbox next to "Disable Cache")
4. Go to or refresh the Site Editor.
5. In the Network tab, the Outfit-Variable.woff2 file should be listed.

Notice the font is listed using 15.8.1 - it works ✅

Before: Reproduce the bug with Gutenberg 15.9.0:

1. Go to Plugins.
2. Upgrade the Gutenberg plugin to 15.9.0.
3. Go to or refresh the Site Editor.
4. In the Network tab, the Outfit-Variable.woff2 file should be listed, but it's not. This is the bug / regression ❌ 🐞

After: Bugfix

1. Apply the code change to your test site.
2. Refresh the Site Editor.
3. In the Network tab, the Outfit-Variable.woff2 should be listed.

Expectation: The font file from the Frost theme, i.e. Outfit-Variable.woff2 should appear in the Network tab with a 200 status 🟢

[ndiego]

Thanks for the quick fix @hellofromtonya. Everything is now working for me.

In the gif below, I have applied the IBM Plex Mono font in TT3 to all text. Then manually removing the specification in CSS reverts the text to monospace, which confirms the font is correctly getting applied.

[github-actions]

Flaky tests detected in 6de50d6.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5146490128
📝 Reported issues:

• [Flaky Test] should allow to return Global Styles root when example is clicked #50799 in /test/e2e/specs/site-editor/style-book.spec.js
• [Flaky Test] should open correct Global Styles panel when example is clicked #50839 in /test/e2e/specs/site-editor/style-book.spec.js

[ironprogrammer]

Test Report

I've also been able to confirm this patch works as expected.

Environment

• Hardware: MacBook Pro Apple M1 Pro
• OS: macOS 13.4
• Browser: Safari 16.5
• Server: nginx/1.25.0
• PHP: 7.4.33
• WordPress: 6.3-alpha-55505-src
• Theme: twentytwentythree v1.1, frost v1.0.3
• Active Plugins:
  • gutenberg v15.9.0 (trunk)

Actual Results

• ✅ Frost theme: Outfit-Variable.woff2 was loaded in the browser.
• ✅ TT3 "Block out" with text font set to IBM Plex Mono, using Style Book: theme-included fonts were loaded.

Supplemental Artifacts

Before Patch	After Patch

• Click here to view Frost w/o Gutenberg active.
• Click here to view TT3 Style Book w/o Gutenberg active.

[ryandejaegher]

Hi all, I've tested this fix and while it fixes the font display issue in the global style editor, the issue remains in the page/post editor

Oddly the fonts appear correctly when using a different preview (mobile/tablet view) in the editor

[hellofromtonya]

Update: This test report is invalid for this PR. Why? It's testing with a Google Fonts Provider, not a local font. Doh.

Test Report: Test editing a post

Env:

• WordPress: 6.2.2
• Plugins:
  • Gutenberg: 15.9.0 with the change from this PR applied.
  • Google Fonts Tester plugin - for adding Google Fonts to your local test site.
• Theme: TT3
• Browser: Firefox
• OS: macOS
• Localhost: Local

Test Instructions

1. Open or create a post.
2. Open the Network tab in your favorite browser's dev tools.
3. Change the font for a heading block:
   • Select a heading block.
   • Select "Block" in the Post / Block UI side toolbar.
   • Select "Font family" by selecting the 3 vertical dots icon next to Typography and then selecting Font family. This adds Font to Typography for font selection.
   • Select Playfair Display in the Font selector.
   • Does the font show in the Network tab's font list? It should.
4. Change the font for the paragraph block:
   • Select a paragraphy block.
   • Select "Block" in the Post / Block UI side toolbar.
   • Select "Font family" by selecting the 3 vertical dots icon next to Typography and then selecting Font family. This adds Font to Typography for font selection.
   • Select Merriweather in the Font selector.
   • Does the font show in the Network tab's font list? It should.
5. Save the post.
6. Refresh the page. Do both fonts show in the Network tab's font list? They should.

Test Results

✅ Playfair Display font does appear in the Network tab's font list with a 200 status 🟢

✅ Merriweather font also appears in the Network tab's font list with a 200 status 🟢

Inspecting the iframe's HTML, the @font-face styles are there for both fonts ✅

It's working as expected in my testing.

[ndiego]

Hmm, it's working for me in the post/page Editor with WordPress 6.2.2 and this patch. @ryandejaegher are you using 6.2.2, and are you able to test if the same issue occurs using the included fonts in Twenty Twenty-Three?

[hellofromtonya]

Oh silly me, this test report is invalid as it's using a different fonts provider. Please ignore it. I'm now testing in the post editor with a local font.

[hellofromtonya]

Test Report: Test editing a post

Env:

• WordPress: 6.2.2
• Plugins:
  • Gutenberg: 15.9.0 with the change from this PR applied.
  • Google Fonts Tester plugin - for adding Google Fonts to your local test site.
• Theme: TT3
• Browser: Firefox
• OS: macOS
• Localhost: Local

Test Instructions

1. Open or create a post.
2. Open the Network tab in your favorite browser's dev tools.
3. Change the font for a heading block:
   • Select a heading block.
   • Select "Font family" by selecting the 3 vertical dots icon next to Typography and then selecting Font family. This adds Font to Typography for font selection.
   • Select Source Serif Pro in the Font selector.
   • Does the font show in the Network tab's font list? It should.
4. Change the font for the paragraph block:
   • Select a paragraphy block.
   • Select "Font family" by selecting the 3 vertical dots icon next to Typography and then selecting Font family. This adds Font to Typography for font selection.
   • Select IBM Plex Mono in the Font selector.
   • Does the font show in the Network tab's font list? It should.
5. Save the post.
6. Refresh the page. Do both fonts show in the Network tab's font list? They should.

Test Results

✅ Source Serif Pro font does appear in the Network tab's font list with a 200 status 🟢

✅ IBM Plex Mono font also appears in the Network tab's font list with a 200 status 🟢

Inspecting the iframe's HTML, the @font-face styles are there for both fonts ✅

It's working as expected in my testing.

[hellofromtonya]

@ryandejaegher It works for me too. Can you share how you're testing it including your testing environment set up such as the WordPress version, what plugins are activated, which theme, etc? That information can help us.

[ryandejaegher]

Hey @hellofromtonya sorry for the delay. After playing around with plugins it looks like the issue is related to ACF

ACF: 6.1.6
WP: 6.2.2
Gutenberg: 15.9.0

Tested on Safari 16.4

If I disable ACF, my fonts load correctly in the editor.

[hellofromtonya]

@ryandejaegher I'm glad you found the issue on your site and that this PR is working for you too. Thank you so much for investigating and reporting back.

[hellofromtonya]

Seems this PR is good to go. Thank you everyone for your contributions!

I've marked this PR for 15.9.1 release. cc @c4rl0sbr4v0

[cbravobernal]

Cherry picked for 15.9.1

[ndiego]

@ryandejaegher I should have caught this earlier 🤦‍♂️, but the issue you experienced is not isolated to ACF. It's actually any plugin that adds metaboxes to the Editor, which causes the Editor to no longer be iframed. I have logged the issue here.

[nicomollet]

I encountered the same issue.
Initially thought it was because of Gutenberg.

But it's Yoast (20.9) that prevents the fonts from loading for some reason :(
Looks like what @ndiego said.

[ndiego]

@hellofromtonya @tellthemachines @ramonjd it does not look like this ever made it into 6.3 Beta 2.

If you comment out these lines, the fonts load as expected. When testing make sure that Gutenberg is not active.

[ramonjd]

it does not look like this ever made it into 6.3 Beta 2.

@hellofromtonya I think we need advice here. My understanding was that the Font API was not going to be part of 6.3.

[ironprogrammer]

it does not look like this ever made it into 6.3 Beta 2.

@hellofromtonya I think we need advice here. My understanding was that the Font API was not going to be part of 6.3.

Hi, @ramonjd -- this is being addressed in https://core.trac.wordpress.org/ticket/58672, which will merge this change over in a separate PR.

That's correct about the Fonts API not going into this release. It's changing significantly to support the Font Library, as explained starting here: #41479 (comment).

[ramonjd]

Ah, got it. Thanks for the clarification @ironprogrammer 🙇🏻