-
-
Save hellofromtonya/21e5a34a12c0793d0f751baa6c51f30d to your computer and use it in GitHub Desktop.
TT1 with theme.json > with only the fonts defined.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Set up instructions: | |
| 1. Copy TT1 theme. | |
| 2. Open `style.css` and change the "Theme Name" to "TT1 theme.json". | |
| 3. Copy and paste the Twenty Twenty-Three (TT3) `assets/fonts/` folder. | |
| 4. Create a `theme.json` file in the root of the theme's directory. | |
| 5. Copy and paste the `theme.json` code in this gist into that new file. Save the file. | |
| 6. Activate this theme. | |
| 7. Open the site on the front-end. | |
| 8. Using your favorite browser, inspect the HTML using its dev tools: | |
| * Find `<style id="wp-fonts-local">` element in the `<head>`. | |
| * Inspect the CSS. It should include a `@font-face` style for each font in the `theme.json`. | |
| Expectations: | |
| The generated CSS should match the `index.html` file in this gist. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "$schema": "https://schemas.wp.org/trunk/theme.json", | |
| "version": 2, | |
| "settings": { | |
| "typography": { | |
| "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" | |
| }, | |
| { | |
| "fontFace": [ | |
| { | |
| "fontDisplay": "block", | |
| "fontFamily": "IBM Plex Mono", | |
| "fontStretch": "normal", | |
| "fontStyle": "normal", | |
| "fontWeight": "300", | |
| "src": [ | |
| "file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Light.woff2" | |
| ] | |
| }, | |
| { | |
| "fontDisplay": "block", | |
| "fontFamily": "IBM Plex Mono", | |
| "fontStretch": "normal", | |
| "fontStyle": "normal", | |
| "fontWeight": "400", | |
| "src": [ | |
| "file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2" | |
| ] | |
| }, | |
| { | |
| "fontDisplay": "block", | |
| "fontFamily": "IBM Plex Mono", | |
| "fontStretch": "normal", | |
| "fontStyle": "italic", | |
| "fontWeight": "400", | |
| "src": [ | |
| "file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Italic.woff2" | |
| ] | |
| }, | |
| { | |
| "fontDisplay": "block", | |
| "fontFamily": "IBM Plex Mono", | |
| "fontStretch": "normal", | |
| "fontStyle": "normal", | |
| "fontWeight": "700", | |
| "src": [ | |
| "file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2" | |
| ] | |
| } | |
| ], | |
| "fontFamily": "'IBM Plex Mono', monospace", | |
| "name": "IBM Plex Mono", | |
| "slug": "ibm-plex-mono" | |
| }, | |
| { | |
| "fontFace": [ | |
| { | |
| "fontFamily": "Inter", | |
| "fontStretch": "normal", | |
| "fontStyle": "normal", | |
| "fontWeight": "200 900", | |
| "src": [ | |
| "file:./assets/fonts/inter/Inter-VariableFont_slnt,wght.ttf" | |
| ] | |
| } | |
| ], | |
| "fontFamily": "\"Inter\", sans-serif", | |
| "name": "Inter", | |
| "slug": "inter" | |
| }, | |
| { | |
| "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" | |
| } | |
| ] | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment