• I used Create Block Theme to add some Google fonts to my development website. One font — Zilla Slab — works perfectly. However, the Roboto font has some issues. When I try to change the appearance of the font in the Styles palette in the Site Editor, the appearance of the font doesn’t change, neither in the editor or on the site itself.

    Also, the B and I buttons in the block editor also can’t change the font to the bold or italic version. The proper HTML tags are applied to the text properly, but it still displays the “regular” Roboto font. The same is true of the italics ()

    I don’t know what’s different about Zilla Slab and Roboto. I know this is possible with the Roboto font. I have a website in production using a classic theme where the font does its job just fine.

    Here is my theme.json, as generated by Create Block Theme:

    {
    	"settings": {
    		"appearanceTools": true,
    		"color": {
    			"custom": true,
    			"customGradient": true
    		},
    		"layout": {
    			"contentSize": "64rem",
    			"wideSize": "81.875rem"
    		},
    		"spacing": {
    			"units": [
    				"%",
    				"px",
    				"em",
    				"rem",
    				"vh",
    				"vw"
    			]
    		},
    		"typography": {
    			"customFontSize": true,
    			"fontFamilies": [
    				{
    					"fontFace": [
    						{
    							"fontFamily": "Roboto",
    							"fontStyle": "normal",
    							"fontWeight": "300",
    							"src": [
    								"file:./assets/fonts/roboto_300.ttf"
    							]
    						},
    						{
    							"fontFamily": "Roboto",
    							"fontStyle": "normal",
    							"fontWeight": "500",
    							"src": [
    								"file:./assets/fonts/roboto_500.ttf"
    							]
    						},
    						{
    							"fontFamily": "Roboto",
    							"fontStyle": "normal",
    							"fontWeight": "700",
    							"src": [
    								"file:./assets/fonts/roboto_700.ttf"
    							]
    						},
    						{
    							"fontFamily": "Roboto",
    							"fontStyle": "italic",
    							"fontWeight": "300",
    							"src": [
    								"file:./assets/fonts/roboto_300italic.ttf"
    							]
    						},
    						{
    							"fontFamily": "Roboto",
    							"fontStyle": "normal",
    							"fontWeight": "400",
    							"src": [
    								"file:./assets/fonts/roboto_regular.ttf"
    							]
    						},
    						{
    							"fontFamily": "Roboto",
    							"fontStyle": "italic",
    							"fontWeight": "400",
    							"src": [
    								"file:./assets/fonts/roboto_italic.ttf"
    							]
    						},
    						{
    							"fontFamily": "Roboto",
    							"fontStyle": "italic",
    							"fontWeight": "500",
    							"src": [
    								"file:./assets/fonts/roboto_500italic.ttf"
    							]
    						},
    						{
    							"fontFamily": "Roboto",
    							"fontStyle": "italic",
    							"fontWeight": "700",
    							"src": [
    								"file:./assets/fonts/roboto_700italic.ttf"
    							]
    						}
    					],
    					"fontFamily": "Roboto",
    					"slug": "roboto"
    				},
    				{
    					"fontFace": [
    						{
    							"fontFamily": "Antonio",
    							"fontStyle": "normal",
    							"fontWeight": "700",
    							"src": [
    								"file:./assets/fonts/antonio_700.ttf"
    							]
    						}
    					],
    					"fontFamily": "Antonio",
    					"slug": "antonio"
    				},
    				{
    					"fontFace": [
    						{
    							"fontFamily": "Zilla Slab",
    							"fontStyle": "normal",
    							"fontWeight": "300",
    							"src": [
    								"file:./assets/fonts/zilla-slab_300.ttf"
    							]
    						},
    						{
    							"fontFamily": "Zilla Slab",
    							"fontStyle": "normal",
    							"fontWeight": "500",
    							"src": [
    								"file:./assets/fonts/zilla-slab_500.ttf"
    							]
    						},
    						{
    							"fontFamily": "Zilla Slab",
    							"fontStyle": "normal",
    							"fontWeight": "600",
    							"src": [
    								"file:./assets/fonts/zilla-slab_600.ttf"
    							]
    						},
    						{
    							"fontFamily": "Zilla Slab",
    							"fontStyle": "normal",
    							"fontWeight": "700",
    							"src": [
    								"file:./assets/fonts/zilla-slab_700.ttf"
    							]
    						},
    						{
    							"fontFamily": "Zilla Slab",
    							"fontStyle": "italic",
    							"fontWeight": "300",
    							"src": [
    								"file:./assets/fonts/zilla-slab_300italic.ttf"
    							]
    						},
    						{
    							"fontFamily": "Zilla Slab",
    							"fontStyle": "normal",
    							"fontWeight": "400",
    							"src": [
    								"file:./assets/fonts/zilla-slab_regular.ttf"
    							]
    						},
    						{
    							"fontFamily": "Zilla Slab",
    							"fontStyle": "italic",
    							"fontWeight": "400",
    							"src": [
    								"file:./assets/fonts/zilla-slab_italic.ttf"
    							]
    						},
    						{
    							"fontFamily": "Zilla Slab",
    							"fontStyle": "italic",
    							"fontWeight": "500",
    							"src": [
    								"file:./assets/fonts/zilla-slab_500italic.ttf"
    							]
    						},
    						{
    							"fontFamily": "Zilla Slab",
    							"fontStyle": "italic",
    							"fontWeight": "600",
    							"src": [
    								"file:./assets/fonts/zilla-slab_600italic.ttf"
    							]
    						},
    						{
    							"fontFamily": "Zilla Slab",
    							"fontStyle": "italic",
    							"fontWeight": "700",
    							"src": [
    								"file:./assets/fonts/zilla-slab_700italic.ttf"
    							]
    						}
    					],
    					"fontFamily": "Zilla Slab",
    					"slug": "zilla-slab"
    				}
    			]
    		}
    	},
    	"templateParts": [
    		{
    			"area": "header",
    			"name": "header"
    		},
    		{
    			"area": "footer",
    			"name": "footer"
    		}
    	],
    	"version": 2
    }

    Can anyone help? Roboto is a very common font and this is driving me crazy!

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Google Roboto font appearance won’t work’ is closed to new replies.