Custom fonts

@sg23838586 Not without creating a child theme with a different set of fontfamilies added in the theme.json, as far as I know. At least not if you want the font families to work correctly in the Global Styles section of the Site Editor.

Thanks for a super fast response ??

I am trying to add Source Sans Pro. I have managed to add a child theme, and I have added all the TTF files to beaumont-child\assets\fonts:

SourceSerifPro-Black.ttf
SourceSerifPro-BlackItalic.ttf
SourceSerifPro-Bold.ttf
SourceSerifPro-BoldItalic.ttf
SourceSerifPro-ExtraLight.ttf
SourceSerifPro-ExtraLightItalic.ttf
SourceSerifPro-Italic.ttf
SourceSerifPro-Light.ttf
SourceSerifPro-LightItalic.ttf
SourceSerifPro-Regular.ttf
SourceSerifPro-SemiBold.ttf
SourceSerifPro-SemiBoldItalic.ttf

I have made a new empty theme.json file, but I am not sure how to add all these fonts to the theme.json file.

The theme.json file in Beaumont is huge. Do you really write all that by yourself? ??

@sg23838586 No worries! If you add the contents of the code block below to the theme.json file in your child theme, you should be good to go:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"fontFace": [
						{
							"fontFamily": "Source Serif Pro",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "200",
							"src": [
								"file:./assets/fonts/SourceSerifPro-ExtraLight.ttf"
							]
						},
						{
							"fontFamily": "Source Serif Pro",
							"fontStretch": "normal",
							"fontStyle": "italic",
							"fontWeight": "200",
							"src": [
								"file:./assets/fonts/SourceSerifPro-ExtraLightItalic.ttf"
							]
						},
						{
							"fontFamily": "Source Serif Pro",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "300",
							"src": [
								"file:./assets/fonts/SourceSerifPro-Light.ttf"
							]
						},
						{
							"fontFamily": "Source Serif Pro",
							"fontStretch": "normal",
							"fontStyle": "italic",
							"fontWeight": "300",
							"src": [
								"file:./assets/fonts/SourceSerifPro-LightItalic.ttf"
							]
						},
						{
							"fontFamily": "Source Serif Pro",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "400",
							"src": [
								"file:./assets/fonts/SourceSerifPro-Regular.ttf"
							]
						},
						{
							"fontFamily": "Source Serif Pro",
							"fontStretch": "normal",
							"fontStyle": "italic",
							"fontWeight": "400",
							"src": [
								"file:./assets/fonts/SourceSerifPro-Italic.ttf"
							]
						},
						{
							"fontFamily": "Source Serif Pro",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "600",
							"src": [
								"file:./assets/fonts/SourceSerifPro-SemiBold.ttf"
							]
						},
						{
							"fontFamily": "Source Serif Pro",
							"fontStretch": "normal",
							"fontStyle": "italic",
							"fontWeight": "600",
							"src": [
								"file:./assets/fonts/SourceSerifPro-SemiBoldItalic.ttf"
							]
						},
						{
							"fontFamily": "Source Serif Pro",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "700",
							"src": [
								"file:./assets/fonts/SourceSerifPro-Bold.ttf"
							]
						},
						{
							"fontFamily": "Source Serif Pro",
							"fontStretch": "normal",
							"fontStyle": "italic",
							"fontWeight": "700",
							"src": [
								"file:./assets/fonts/SourceSerifPro-BoldItalic.ttf"
							]
						},
						{
							"fontFamily": "Source Serif Pro",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "900",
							"src": [
								"file:./assets/fonts/SourceSerifPro-Black.ttf"
							]
						},
						{
							"fontFamily": "Source Serif Pro",
							"fontStretch": "normal",
							"fontStyle": "italic",
							"fontWeight": "900",
							"src": [
								"file:./assets/fonts/SourceSerifPro-BlackItalic.ttf"
							]
						}
					],
					"fontFamily": "\"Source Serif Pro\", ui-serif, serif",
					"name": "Source Serif Pro",
					"slug": "child-font"
				}
			]
		}
	},
	"version": 2
}

Note that this code replaces all of the font families included in Beaumont itself, so the theme will look a bit busted at first. When you’ve added the code and activated the theme:

1. Go to Appearance → Editor
2. Click the Global Styles icon in the top right
3. Click Typography → Text in the panel, and
4. Change the “Font” setting from “Default” to “Source Serif Pro”.

Let me know how it goes!

I did write pretty much all of the the theme.json file myself, but when you’ve released themes with 4000+ lines of CSS, 700+ lines of JSON doesn’t seem so bad ??

Thanks! I wouldn’t have made it without you.

It seems to work ??