Unlock the secrets of WordPress theme.json font family! Set font families and default fonts, and load unique custom & Google fonts.

Welcome to the magical realm of WordPress, where the theme.json file is your creative canvas to paint with beautiful typography. This powerful JSON file is like the command center of your WordPress theme, with the keys to customize global styles and settings. Quickly learn how to set the theme.json font family. Check this out:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": "'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif",
					"name": "Old Style",
					"slug": "old-style"
				},
				{
					"fontFamily": "ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif",
					"name": "Rounded Sans",
					"slug": "rounded-sans"
				},
				{
					"fontFamily": "'Source Serif Pro', serif",
					"name": "Source Serif Pro",
					"slug": "source-serif-pro",
					"fontFace": [
						{
							"fontFamily": "Source Serif Pro",
							"fontWeight": "400",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [
								"file:./assets/fonts/SourceSerifPro-regular.woff2"
							]
						},
						{
							"fontFamily": "Source Serif Pro",
							"fontWeight": "400",
							"fontStyle": "italic",
							"fontStretch": "normal",
							"src": [
								"file:./assets/fonts/SourceSerifPro-italic.woff2"
							]
						}
					]
				}
			]
		}
	},
	"styles": {
		"elements": {
			"h1": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--rounded-sans)"
				}
			},
			"h2": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--rounded-sans)"
				}
			},
			"h3": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--rounded-sans)"
				}
			},
			"h4": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--rounded-sans)"
				}
			},
			"h5": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--rounded-sans)"
				}
			},
			"h6": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--rounded-sans)"
				}
			}
		},
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--old-style)"
		}
	}
}

In this theme.json font family snippet, we’ve cooked up a typographical feast. First, we’ve set up a trio of fonts, including the traditional Iowan Old Style, the friendly Rounded Sans, and a custom Source Serif Pro Google font, which we’re hosting ourselves.

---

Here’s the rundown for the code above:

• Our Iowan Old Style and Rounded Sans fonts are defined with their respective names and slugs. These fonts are like the ingredients in our pantry, ready to be used throughout the website. Iowan Old Style brings a classic, scholarly feel, while Rounded Sans serves a softer, friendlier look.
• The Source Serif Pro font is a bit more special. This theme.json Google font included the font family but also defined specific fontFace declarations. It’s like having a secret sauce. We can customize the fontWeight and fontStyle, and we’re pointing to our font files, stored in the assets/fonts directory of our theme. This is a prime example of how to use a theme.json custom font.

But wait, there’s more! The theme.json sets a default font family for our theme, the Iowan Old Style, with the line:

"fontFamily": "var(--wp--preset--font-family--old-style)"

This is your go-to theme.json set default font family trick.

We’ve also styled our header tags (h1 to h6) to use the Rounded Sans font. Now, our headers will be displayed in this friendly, rounded font, lifting the mood of our readers as they peruse our site.

So, there you have it. A quick look into the world of theme.json font family customization. There’s a whole ocean of typographical possibilities out there, waiting for you to dive in and explore.

---

Let’s jazz up your website with a little font flair! Here are some handy tips on how to make the most out of your theme.json font family settings:

1. System-Safe Fonts are Your Friends: Not all fonts are created equal, especially when it comes to browser compatibility. To keep your website looking consistent across all devices, consider using system-safe fonts. They are pre-installed on most devices, so your users won’t need to download anything extra. For example, the system-ui font stack is a great choice: font-family: system-ui, sans-serif; Check out Modern Font Stacks for more system-safe font options.​
2. Consider Readability: When choosing fonts, always consider how easy it is for users to read your content. Fonts should be clear and legible, even at smaller sizes. Additionally, think about how different fonts might look together – you want a harmonious balance, not a font feud!

Remember, fonts are more than just pretty faces – they can set the tone for your entire website and play a big part in user experience. So choose wisely when using the theme.json font family properties, have fun, and don’t be afraid to experiment!

---

Here are some fantastic resources that will help you delve deeper into the world of theme.json files and their implementation.

1. Modern Font Stacks: This is your go-to resource for finding system-safe fonts to use in your theme.json file. It offers a range of font stacks that are compatible with most systems and browsers, helping your site maintain a consistent look across different devices.
2. Setting the Default Content Width: Learn how to easily change Gutenberg’s default content width using the theme.json.
3. WordPress Theme Handbook: This is an official guide from WordPress that provides a comprehensive overview of WordPress theme development. It doesn’t specifically focus on theme.json, but it’s a fantastic resource for understanding WordPress themes in general.
4. Block Editor Handbook: Another gem from the official WordPress resources, the Block Editor Handbook offers a deep dive into the block editor, which is where the theme.json plays a significant role.

Remember, the key to mastering theme.json is continuous learning and experimentation. Happy coding!