mirror of
https://github.com/gosticks/wordpress-develop.git
synced 2025-10-16 12:05:38 +00:00
c29b095e76
Introducing Font Face, a server-side `@font-face` styles generator and printer. tl;dr: * Introduces Font Face. * Deprecates `_wp_theme_json_webfonts_handler()`. **Introduce Font Face** From an array of fonts (i.e. each font-family and its font variations to be processed), it: 1. Validates each `font-face` declaration, i.e. the CSS property and value pairing. If validation fails, processing stops with no font-face styles printed. 3. Generates the `@font-face` CSS for each font-family. 4. Prints the CSS within a `<style id="wp-fonts-local">` element. The entry point into Font Face is through a new global function called `wp_print_font_faces()`, which is automatically called: * when the `'wp_head'` hook runs (for the front-end). * when the `'admin_print_styles'` hook runs (for the back-end). * when `_wp_get_iframed_editor_assets()` runs to inject the `@font-face` styles into the iframed editor. Once called, it gets the fonts from Theme_JSON merged data layer, which includes theme defined fonts and user activated fonts (once the Font Library #59166 is introduced into Core). For classic sites, themes and plugins can directly call `wp_print_font_faces()` and pass their fonts array to it for processing. **Deprecates `_wp_theme_json_webfonts_handler()`.** As Font Face is a direct replacement, the stopgap code in `_wp_theme_json_webfonts_handler()` (introduced in 6.0.0 via [53282]) is deprecated and unused in Core. **Props note:** There's a long multiple year history baked into Font Face, which dates back to the early versions of a web font API (see #46370 and [https://github.com/WordPress/gutenberg/issues/41479 roadmap]. The props list includes those who contributed from those early versions up to this commit. **References:** * #46370 original (Web)Fonts API proposal for registering and enqueuing web fonts. * [https://github.com/WordPress/gutenberg/issues/41479 Gutenberg tracking issue] which includes the evolution from Webfonts API to Fonts API to Font Face. * [53282] / #55567 Added the stopgap code `_wp_theme_json_webfonts_handler()` in 6.0. * [https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face @font-face on mdn web docs] * #59166 Font Library: Font manager for WordPress Follow-up to [53282]. Props aristath, jonoaldersonwp, hellofromTonya, andraganescu, annezazu, antonvlasenko, arena, askdesign, azaozz, bph, bradley2083, colorful-tones, costdev, davidbaumwald, desrosj, dingo_d, djcowan, domainsupport, dryanpress, elmastudio, flixos90, francina, garrett-eclipse, gigitux, grantmkin, grapplerulrich, gziolo, ironprogrammer, jb510, jeffpaul, jeremyyip, jffng, joostdevalk, jorgefilipecosta, juanmaguitar, mamaduka, matveb, mburridge, mitogh, ndiego, ntsekouras, oandregal, ocean90, oglekler, paaljoachim, pagelab, peterwilsoncc, poena, priethor, scruffian, SergeyBiryukov, shiloey, simison, skorasaurus, soean, westonruter, wildworks, zaguiini. Fixes #59165. git-svn-id: https://develop.svn.wordpress.org/trunk@56500 602fd350-edb4-49c9-b593-d223f7449a82
113 lines
2.4 KiB
JSON
113 lines
2.4 KiB
JSON
{
|
|
"version": 2,
|
|
"settings": {
|
|
"appearanceTools": true,
|
|
"color": {
|
|
"palette": [
|
|
{
|
|
"slug": "light",
|
|
"name": "Light",
|
|
"color": "#f5f7f9"
|
|
},
|
|
{
|
|
"slug": "dark",
|
|
"name": "Dark",
|
|
"color": "#000"
|
|
}
|
|
]
|
|
},
|
|
"typography": {
|
|
"dropCap": false,
|
|
"fluid": true,
|
|
"fontFamilies": [
|
|
{
|
|
"fontFace": [
|
|
{
|
|
"fontFamily": "DM Sans",
|
|
"fontStretch": "normal",
|
|
"fontStyle": "normal",
|
|
"fontWeight": "400",
|
|
"src": [
|
|
"file:./assets/fonts/dm-sans/DMSans-Regular.woff2"
|
|
]
|
|
},
|
|
{
|
|
"fontFamily": "DM Sans",
|
|
"fontStretch": "normal",
|
|
"fontStyle": "italic",
|
|
"fontWeight": "400",
|
|
"src": [
|
|
"file:./assets/fonts/dm-sans/DMSans-Regular-Italic.woff2"
|
|
]
|
|
},
|
|
{
|
|
"fontFamily": "DM Sans",
|
|
"fontStretch": "normal",
|
|
"fontStyle": "normal",
|
|
"fontWeight": "700",
|
|
"src": [
|
|
"file:./assets/fonts/dm-sans/DMSans-Bold.woff2"
|
|
]
|
|
},
|
|
{
|
|
"fontFamily": "DM Sans",
|
|
"fontStretch": "normal",
|
|
"fontStyle": "italic",
|
|
"fontWeight": "700",
|
|
"src": [
|
|
"file:./assets/fonts/dm-sans/DMSans-Bold-Italic.woff2"
|
|
]
|
|
}
|
|
],
|
|
"fontFamily": "\"DM Sans\", sans-serif",
|
|
"name": "DM Sans",
|
|
"slug": "dm-sans"
|
|
},
|
|
{
|
|
"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
|
|
"name": "System Font",
|
|
"slug": "system-font"
|
|
},
|
|
{
|
|
"fontFace": [
|
|
{
|
|
"fontFamily": "Source Serif Pro",
|
|
"fontStretch": "normal",
|
|
"fontStyle": "normal",
|
|
"fontWeight": "200 900",
|
|
"src": [
|
|
"file:./assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2"
|
|
]
|
|
},
|
|
{
|
|
"fontFamily": "Source Serif Pro",
|
|
"fontStretch": "normal",
|
|
"fontStyle": "italic",
|
|
"fontWeight": "200 900",
|
|
"src": [
|
|
"file:./assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2"
|
|
]
|
|
}
|
|
],
|
|
"fontFamily": "\"Source Serif Pro\", serif",
|
|
"name": "Source Serif Pro",
|
|
"slug": "source-serif-pro"
|
|
}
|
|
]
|
|
},
|
|
"useRootPaddingAwareAlignments": true
|
|
},
|
|
"styles": {
|
|
"typography": {
|
|
"fontFamily": "var(--wp--preset--font-family--system-font)"
|
|
}
|
|
},
|
|
"templateParts": [
|
|
{
|
|
"name": "small-header",
|
|
"title": "Small Header",
|
|
"area": "header"
|
|
}
|
|
]
|
|
}
|