Using Google Fonts #48

stephenhutson · 2023-06-20T01:00:26Z

I'm fairly new to working with the new block editor, so forgive me if this is too newbie of a question.

I have a couple of different Google Fonts I'd like to use, but the only options I see in Ollie are "Inter" and "Monospace".

I installed a plugin to give me access to Google Fonts but that doesn't seem to work when I edit the page via the block editor or through Ollie's templates.

I can't find any documentation from OllieWP about how to install custom fonts or use Google Fonts, so I'm coming here. What am I missing?

greening · 2023-06-20T02:21:27Z

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"
							}
						}
					}
				}
			}
		}
	}
}