The WordPress Web Fonts API Has Arrived – WP Tavern
The journey towards an internet fonts API in WordPress has been a rollercoaster of feelings for builders. After being punted from the WordPress 5.9 release, it was moved to the Gutenberg mission, the place it might be constructed alongside associated options that relied on it.
The API has been merged into the Gutenberg plugin and will land in model 12.8. Theme authors who wish to take a look at it could actually clone the dev model of the plugin or download the nightly version from Gutenberg Instances.
Jono Alderson opened the original ticket for an internet fonts API in February 2019. Nevertheless, it was not till late 2021 that it gained a mass of support and development. By most accounts, the API seemed able to ship with WordPress 5.9. Nevertheless, it was placed on maintain by Andrew Ozz, one of many lead WordPress builders.
It was not a well-liked determination, however it could have been the most effective course. The API was restricted as a result of it didn’t but have theme.json assist. Being solely obtainable by means of PHP meant that theme authors would have principally been doing what they all the time have — rolling out their very own resolution. This was not the holdup for its unveiling, however it’s going to possible be the API’s commonest use case.
Whereas many wished to see this function land in WordPress 5.9, the additional months have given it time to evolve right into a cleaner API that integrates with the location and content material editors.
Theme authors can now outline font-face definitions alongside their corresponding households in theme.json recordsdata, and WordPress will routinely load the mandatory @font-face CSS within the editor and on the front-end. I’ve examined this extensively and haven’t run into any issues.
The potential draw back is that the function solely ships with assist for an area supplier, which implies fonts should be bundled with the theme. A Google Fonts supplier was a part of the unique implementation however was later eliminated.
Ozz goes into further details in an earlier ticket, however his suggestion was to drop Google Fonts assist for now:
Add assist just for native fonts for now. If WordPress decides to incorporate assist for the Google CDN afterward, the implementation should contemplate internet privateness legal guidelines and restrictions and be tied with an eventual Person Consent API, and so on.
Associated article: German Court Fines Website Owner for Violating the GDPR by Using Google-Hosted Fonts
Ari Stathopoulos, one of many builders behind the online fonts API, defined that bundling an answer in core that writes the font recordsdata on to the server would improve privacy:
As an alternative of eradicating it, perhaps we may implement them correctly, implementing locally-hosted webfonts to enhance efficiency & privateness? This fashion we’d be setting a great instance, and we’d see a big efficiency & privateness enchancment within the WP ecosystem as themes & plugins that at present use Google-fonts, Adobe-fonts and whatnot will begin to undertake the API.
For now, it seems like native fonts are formally supported, however theme and plugin authors should register customized suppliers. One concern with leaving out Google Fonts assist is that there can be many competing options within the wild as an alternative of 1 strong supplier that everybody can depend on. The extra builders construct their very own wheels, the extra possible completely different implementations ship with bugs or safety points.
Automattic already has a draft patch for a Google provider for Jetpack. Assuming that will get pulled into the plugin, it’s going to undoubtedly battle with a theme down the street that registers its personal google supplier ID.
Solely supporting native fonts may additionally create bigger theme obtain sizes. For a lot of themes, this must be a non-issue. One, two, or three font packages are cheap. Nevertheless, if world model variations change into fashionable, we may see themes that ship dozens of fonts to cowl a number of pre-packaged designs. That can rapidly result in bloated theme recordsdata and, mixed with sufficient photographs, theme authors might hit the 10MB restrict for submission to the listing. That feels slightly like tomorrow’s drawback, however it’s one thing to start desirous about in the present day.
There are nonetheless some points that should be solved across the API. Nevertheless, pushing it by means of this early within the WordPress 6.0 launch cycle will give everybody time to check and assist enhance it.
Testing Bundled Fonts
There are two strategies for registering internet fonts with WordPress. For theme authors, the only resolution is to outline them through their theme.json recordsdata. That is the tactic that I’ll cowl under because the file has been normal since WordPress 5.8. There’s a PHP instance within the pull request ticket.
The theme.json keys and values principally correspond to the CSS @font-face rule. Theme authors ought to brush up on it if it has been some time since they’ve used it.
For testing, I registered three internet fonts by means of my theme, and the next screenshot exhibits them in motion within the editor:
Net fonts must be registered below settings.typography.fontFamily as a part of a particular font household definition. The next is a duplicate of the code I’m testing in certainly one of my themes utilizing the Cabin font:
{
"settings": {
"typography": {
"fontFamilies": [
{
"fontFamily": ""Cabin", sans-serif",
"slug": "primary",
"name": "Primary",
"fontFace": [
{
"fontFamily": "Cabin",
"fontWeight": "400 700",
"fontStyle": "normal",
"src": [ "file:./public/fonts/cabin/Cabin-VariableFont_wdth,wght.ttf" ]
},
{
"fontFamily": "Cabin",
"fontWeight": "400 700",
"fontStyle": "italic",
"src": [ "file:./public/fonts/cabin/Cabin-Italic-VariableFont_wdth,wght.ttf" ]
}
]
}
]
}
}
}Observe that file:./public/fonts/*.ttf is relative to the theme folder. Theme authors want to regulate this to suit their theme construction.
