-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Fonts API] Proposal: classic themes define fonts in a theme.json file #51714
Comments
A few pings to contributors involved with the Fonts API: @aristath @jonoalderson @ironprogrammer @anton-vlasenko @azaozz @annezazu. |
Test ReportEnv:
Theme's Set up Instructions
theme.json code to paste into the new theme
Testing Instructions
Results
<style id="wp-fonts-local">
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:fallback;src:url('http://localhost:8889/wp-content/themes/tt1-themejson/assets/fonts/dm-sans/DMSans-Regular.woff2') format('woff2');font-stretch:normal;}@font-face{font-family:"DM Sans";font-style:italic;font-weight:400;font-display:fallback;src:url('http://localhost:8889/wp-content/themes/tt1-themejson/assets/fonts/dm-sans/DMSans-Regular-Italic.woff2') format('woff2');font-stretch:normal;}@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:fallback;src:url('http://localhost:8889/wp-content/themes/tt1-themejson/assets/fonts/dm-sans/DMSans-Bold.woff2') format('woff2');font-stretch:normal;}@font-face{font-family:"DM Sans";font-style:italic;font-weight:700;font-display:fallback;src:url('http://localhost:8889/wp-content/themes/tt1-themejson/assets/fonts/dm-sans/DMSans-Bold-Italic.woff2') format('woff2');font-stretch:normal;}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:300;font-display:block;src:url('http://localhost:8889/wp-content/themes/tt1-themejson/assets/fonts/ibm-plex-mono/IBMPlexMono-Light.woff2') format('woff2');font-stretch:normal;}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:block;src:url('http://localhost:8889/wp-content/themes/tt1-themejson/assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2') format('woff2');font-stretch:normal;}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:400;font-display:block;src:url('http://localhost:8889/wp-content/themes/tt1-themejson/assets/fonts/ibm-plex-mono/IBMPlexMono-Italic.woff2') format('woff2');font-stretch:normal;}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;font-display:block;src:url('http://localhost:8889/wp-content/themes/tt1-themejson/assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2') format('woff2');font-stretch:normal;}@font-face{font-family:Inter;font-style:normal;font-weight:200 900;font-display:fallback;src:url('http://localhost:8889/wp-content/themes/tt1-themejson/assets/fonts/inter/Inter-VariableFont_slnt,wght.ttf') format('truetype');font-stretch:normal;}@font-face{font-family:"Source Serif Pro";font-style:normal;font-weight:200 900;font-display:fallback;src:url('http://localhost:8889/wp-content/themes/tt1-themejson/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2') format('woff2');font-stretch:normal;}@font-face{font-family:"Source Serif Pro";font-style:italic;font-weight:200 900;font-display:fallback;src:url('http://localhost:8889/wp-content/themes/tt1-themejson/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2') format('woff2');font-stretch:normal;}
</style> |
Yesterday, I learned: Since WordPress 6.0.0, a classic theme has had the ability to implement this proposal and it works. Yes, they've had the ability to define their fonts in a |
Cross-sharing feedback from @felixarntz (originally shared on the Ongoing Roadmap) #41479 (comment):
|
Test ReportThis report tests the following scenarios to help confirm that classic theme support for custom fonts via
Setup Instructions
Steps to Test
Environment
Results
|
I've noticed that adding a |
Thanks @anton-vlasenko. I didn't see any issues either. To avoid any potential future conflicts, an approach might be to recommend classic themes remove the 'block-templates' theme support, i.e. remove_theme_support( 'block-templates' ); Just need to figure out the timing for it. |
@anton-vlasenko @hellofromtonya
This is a concern I share. While tremendous work has been happening to bring performance enhancements to block theme performance in core (and while block themes overall are faster), on the server-side the block template handling comes at a sizable performance cost - which is acceptable given the additional features and benefits it comes with. But if having a If having a |
New day, new learnings 😉 Classic themes and plugins will be able to programmatically pass their fonts for
Yesterday, I experimented with a redesign of the Fonts API, transforming it into only a Font Face styles generator and printer #51770. It exposes a This new design then supports all types of sites for both plugins and themes. |
I think this is interesting! Not sure what is needed though. |
With the redesign of Fonts API to expose a I think this issue's proposal as written - i.e. to benefit only the Fonts API's redesign - is no longer needed, as the redesign can solve the problem #51769. I'll close this proposal. That said, giving classic themes the option to define their fonts in Thank you everyone for your contributions! |
Part of #41479
Reference: See the "Update 19 Jun 2023" comment.
Within the fonts management system and Font Library, the Fonts API
register
,deregister
, andenqueue
functionality are no longer "publicly" needed. Plugins will directly interact with the Font Library (when that capability is available).What about classic themes? How could they get their fonts into the Fonts API for server-side dynamic generation and printing of
@font-face
styles?Previously before the Font Library, they would programmatically register and enqueue their fonts using
wp_register_fonts()
andwp_enqueue_fonts()
. This made sense when the Fonts API was designed to allow plugins to introduce their fonts.Now with the new fonts management / Font Library, these functions are no longer needed for plugins. For all theme.json powered sites, these public-facing functions / methods will be disabled or removed.
If those global functions did not exist, how would a classic theme, such as Twenty Twenty-One (TT1), get their fonts into the Fonts API? See the proposal.
Proposal for Classic Themes
This proposal proposes adopting the
theme.json
convention for classic themes to define their fonts for the Fonts API to generate and print the@font-face
styles.Classic themes, such as Twenty Twenty-One (TT1), will define their fonts by adding a
theme.json
file to their theme and defining only thefontFamilies
section.Here's an example:
The Benefits of This Approach
Without this approach, classic themes would need access to
wp_register_fonts()
andwp_enqueue_fonts()
, meaning these public facing functions need logic to disable them for theme.json themes and logic to enable them for classic themes.With this approach, all public facing functionality except for "printing" can either be removed or hidden as interworkings.
The benefits are:
WP_Dependencies
is no longer needed as the basis of the architecture as it's overkill for its needs, given that a bulk of the functionality would need to be disabled.Does it work?
YES!
I tested a copy of TT1 where I added the font assets and a
theme.json
file to it. Here are the testing instructions for how I did it.Yes, it works as expected:
@font-face
styles were generated and printed ✅Next steps
Consensus to move forward with adopting the
theme.json
approach for classic themes.The text was updated successfully, but these errors were encountered: