Using Google Fonts

[stephenhutson]

Using Google Fonts

[greening]

I'm super sympathetic, given my love of fonts. Here is an example file that goes in ollie/styles/something.json. I then select it in Site Editor. You can see it in action, with Ollie as the style, at https://senexrex.com. I just put it up today.

There is a Google font called "Source Sans 3" in here (and a couple of purchased downloaded fonts). All the fonts are pre-downloaded, which is something the Wordpress folks want us to do to conform to GPRS privacy rules. If you are in the US, you can use Google's web fonts, but it might increase download time. So you have to stick those in the mentioned files.

I spent a week looking up how to use all this stuff, and experimenting. Let me know if you get stuck, and I'll see if I can point you to a website to explain more.

There is a sequence of steps to enable this style set on the site, in images at the end of the file.

File ollie/styles/mindfulagility.json:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"title": "Mindful Agility",
	"settings": {
		"color": {
			"palette": [
				{
					"name": "Main Dark Gray (text)",
					"slug": "main",
					"color": "#4C4C4C"
				},
				{
					"name": "Base White (background)",
					"slug": "base",
					"color": "#FFFFFF"
				},
				{
				"name": "Primary",
					"slug": "primary Green (button background)",
					"color": "#24B26B"
				},
				{
					"name": "Secondary Blue (quotes)",
					"slug": "secondary",
					"color": "#268CBF"
				},
				{
					"name": "Main Accent Red (alerts)",
					"slug": "main-accent",
					"color": "#E52E2E"
				},
				{
					"name": "Light Blue",
					"slug": "light-bluet",
					"color": "#A8D1E5"
				},
				{
					"name": "Primary Accent Light Gray (nav link, excerpt)",
					"slug": "primary-accent",
					"color": "#DBDBDB"
				},
				{
					"name": "Tertiary Super Light Blue (preformatted code)",
					"slug": "tertiary",
					"color": "#D4E8F2"
				},
				{
					"name": "Orange (warnings)",
					"slug": "orange",
					"color": "#CF7E4C"
				}
			]
		},
		"custom": {
			"fontWeight": {
				"thin": 100,
				"regular": 400,
				"semi-bold": 600,
				"bold": 700,
				"black": 900
			},
			"lineHeight": {
				"none": 1,
				"tight": 1.1,
				"snug": 1.2,
				"normal": 1.5,
				"relaxed": 1.625,
				"loose": 2,
				"body": "calc(1px + 2ex + 7px)"
			}
		},
		"typography": {
			"dropCap": false,
			"fluid": true,
			"fontFamilies": [
				{
					"fontFamily": "\"Source Sans 3\", sans-serif",
					"name": "primary2 (Source Sans 3)",
					"slug": "primary2",
					"fontFace": [
						{
							"fontDisplay": "swap",
							"fontFamily": "\"Source Sans 3\"",
							"fontStyle": "normal",
							"fontWeight": "100 400 700",
							"src": [
								"file:.\/assets\/fonts\/SourceSans3-latin-normal.woff2"
							]
						},
						{
							"fontDisplay": "swap",
							"fontFamily": "\"Source Sans 3\"",
							"fontStyle": "italic",
							"fontWeight": "100 400 700",
							"src": [
								"file:.\/assets\/fonts\/SourceSans3-latin-italic.woff2"
							]
						}
					]
				},
				{
					"fontFamily": "freight-text-pro, sans-serif",
					"name": "primary (FreightText Pro)",
					"slug": "primary"
				},
				{
					"fontFamily": "\"Roboto Serif\", serif",
					"name": "heading2 (Roboto Serif)",
					"slug": "heading2",
					"fontFace": [
						{
							"fontDisplay": "swap",
							"fontFamily": "\"Roboto Serif\"",
							"fontStyle": "normal",
							"fontWeight": "100 400 700",
							"src": [
								"file:.\/assets\/fonts\/RobotoSerif-latin-normal-var.woff2"
							]
						},
						{
							"fontDisplay": "swap",
							"fontFamily": "\"Roboto Serif\"",
							"fontStyle": "italic",
							"fontWeight": "100 400 700",
							"src": [
								"file:.\/assets\/fonts\/RobotoSerif-latin-italic-var.woff2"
							]
						}
					]
				},
				{
					"fontFamily": "\"Great Escape\", sans-serif",
					"name": "heading (Great Escape)",
					"slug": "heading",
					"fontFace": [
						{
							"fontDisplay": "swap",
							"fontFamily": "\"Great Escape\"",
							"fontStyle": "normal",
							"fontWeight": "700",
							"src": [
								"file:.\/assets\/fonts\/GreatEscapeRg-Bold 266FE2_1_0.woff2"
							]
						},
						{
							"fontDisplay": "swap",
							"fontFamily": "\"Great Escape\"",
							"fontStyle": "normal",
							"fontWeight": "500",
							"src": [
								"file:.\/assets\/fonts\/GreatEscapeRg-Regular 266FE2_2_0.woff2"
							]
						},
						{
							"fontDisplay": "swap",
							"fontFamily": "\"Great Escape\"",
							"fontStyle": "normal",
							"fontWeight": "400",
							"src": [
								"file:.\/assets\/fonts\/GreatEscapeBk-Regular 266FE2_0_0.woff2"
							]
						}
					]
				},
				{
					"fontFamily": "\"Encode Sans SC\", sans-serif",
					"name": "title (Encode Sans SC)",
					"slug": "title",
					"fontFace": [
						{
							"fontDisplay": "swap",
							"fontFamily": "\"Encode Sans SC\"",
							"fontStyle": "normal",
							"fontWeight": "100 400 700",
							"src": [
								"file:.\/assets\/fonts\/EncodeSansSC-latin-normal.woff2"
							]
						}
					]
				},
				{
					"fontFamily": "monospace",
					"name": "Monospace",
					"slug": "monospace"
				}
			],
			"fontSizes": [
				{
					"fluid": {
						"min": ".9rem",
						"max": "1rem"
					},
					"size": "1rem",
					"slug": "x-small",
					"name": "Extra Small"
				},
				{
					"fluid": {
						"min": "1rem",
						"max": "1.2rem"
					},
					"size": "1.2rem",
					"slug": "small"
				},
				{
					"fluid": {
						"min": "1.13rem",
						"max": "1.3rem"
					},
					"size": "1.3rem",
					"slug": "base",
					"name": "Base"
				},
				{
					"fluid": {
						"min": "1.3rem",
						"max": "1.6rem"
					},
					"size": "1.6rem",
					"slug": "medium"
				},
				{
					"fluid": {
						"min": "1.5rem",
						"max": "2rem"
					},
					"size": "2rem",
					"slug": "large"
				},
				{
					"fluid": {
						"min": "2rem",
						"max": "2.8rem"
					},
					"size": "2.8rem",
					"slug": "x-large"
				},
				{
					"fluid": {
						"min": "2.6rem",
						"max": "3.75rem"
					},
					"size": "3.75rem",
					"slug": "xx-large",
					"name": "2xl"
				},
				{
					"fluid": {
						"min": "3rem",
						"max": "4.8rem"
					},
					"size": "4.8rem",
					"slug": "xxx-large",
					"name": "3xl"
				}
			],
			"lineHeight": true
			
		},
		
		"useRootPaddingAwareAlignments": true
	},
	"styles": {
		"blocks": {
			"core/heading": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--heading)",
					"fontWeight": "var(--wp--custom--font-weight--medium)",
					"lineHeight": "var(--wp--custom--line-height--body)"
				},
				"spacing": {
					"margin": {
						"top": "0px",
						"bottom": "0px"
					}
				}
			},
			"core/paragraph": {
				"spacing": {
					"margin": {
						"top": "0px",
						"bottom": "var(--wp--preset--spacing--medium)"
					}
				}
			},
			"core/read-more": {
				"typography": {
					"fontWeight": "var(--wp--custom--font-weight--medium)"
				},
				"elements": {
					"link": {
						"spacing": {
							"margin": {
								"top": "200px",
								"bottom": "200px"
							}
						}
					}
				}
			}
		}
	}
}

[stephenhutson]

Wow, thank you for this thorough and extremely helpful reply! This is great, I did exactly this but with my own fonts and it's working for me.

Would still love to see a way for this to be easier/more user-friendly.

[idrosua]

Hi @stephenhutson and @greening, I have create my own solution that work very well with Gutenberg editor.

I hope you will find it useful.

The repository: https://github.com/orgrosua/yabe-webfont

or you can download directly from WP repository under the name "Yabe Webfont"