WP6 FSE theme.json – Cusom fonts – Weight ant Style not working

  • Resolved fr1000

    (@fr1000)


    2 years, 3 months ago

    Hello Community,

    following issue:

    I’ve created a child theme of the built-in TwentyTwentyTwo Theme and added my custom font within the theme.json. I like to use the font “Roboto” and so, i’ve put the corresponding *.woff2 (also tried with *.tiff) files into the theme strucuture under “assets/fonts/roboto/*.woff2”.

    And i’ve added the fontFamily within the theme.json under “settings.typography.fontFamilies”, which now looks like this:

    "fontFamilies": [
				{
					"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"
				},
				{
					"fontFace": [
						{
							"fontFamily": "Roboto",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "200",
							"fontDisplay": "swap",
							"src": [
								"file:./assets/fonts/roboto/roboto-v30-latin-regular.ttf"
							]
						},
						{
							"fontFamily": "Roboto",
							"fontStretch": "normal",
							"fontStyle": "italic",
							"fontWeight": "200",
							"fontDisplay": "swap",
							"src": [
								"file:./assets/fonts/roboto/roboto-v30-latin-italic.ttf"
							]
						},
						{
							"fontFamily": "Roboto",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "300 400",
							"fontDisplay": "swap",
							"src": [
								"file:./assets/fonts/roboto/roboto-v30-latin-300.ttf"
							]
						},
						{
							"fontFamily": "Roboto",
							"fontStretch": "normal",
							"fontStyle": "italic",
							"fontWeight": "300 400",
							"fontDisplay": "swap",
							"src": [
								"file:./assets/fonts/roboto/roboto-v30-latin-300italic.ttf"
							]
						},
						{
							"fontFamily": "Roboto",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "700",
							"fontDisplay": "swap",
							"src": [
								"file:./assets/fonts/roboto/roboto-v30-latin-700.ttf"
							]
						},
						{
							"fontFamily": "Roboto",
							"fontStretch": "normal",
							"fontStyle": "italic",
							"fontWeight": "700",
							"fontDisplay": "swap",
							"src": [
								"file:./assets/fonts/roboto/roboto-v30-latin-700italic.ttf"
							]
						},
						{
							"fontFamily": "Roboto",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "900",
							"fontDisplay": "swap",
							"src": [
								"file:./assets/fonts/roboto/roboto-v30-latin-900.ttf"
							]
						},
						{
							"fontFamily": "Roboto",
							"fontStretch": "normal",
							"fontStyle": "italic",
							"fontWeight": "900",
							"fontDisplay": "swap",
							"src": [
								"file:./assets/fonts/roboto/roboto-v30-latin-900italic.ttf"
							]
						}
					],
					"fontFamily": "Roboto",
					"name": "Roboto",
					"slug": "roboto"
				}
			],

    I’m able to change the overall fontFamily within the “FSE Editor => Style => Typography” successfully.

    However, the problem is that I can’t use bold and italic. The editor puts bold and italic, when the font “Roboto” is selected, only slightly gray. After saving, no change is visible. When I switch between fonts, the changes (bold, italic) are visible in other fonts. The behavior is the same for front- and back-end.

    Maybe I am doing something wrong and someone can tell me a solution?

    Thanks in advance!

    fr1000

    • This topic was modified 2 years, 3 months ago by fr1000. Reason: fixed code view
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘WP6 FSE theme.json – Cusom fonts – Weight ant Style not working’ is closed to new replies.