Gutenberg theme.json showing fallback fonts.

  • hikatamika

    (@hikatamika)


    3 years, 8 months ago

    I’m trying to get fonts from my assets/fonts/ folder to show up in Gutenberg’s full site editor. I was able to make them selectable options, but what displays instead are the defined fallback fonts. I’m sure I’ve linked them correctly, though.

    "fontFamilies": [
				{
					"fontFamily": "'Baloo Da 2', cursive",
                    "name": "Nav - Baloo Da 2",
                    "slug": "baloo-da-2",
                    "fontFace": [
                        {
                            "fontFamily": "'Baloo Da 2', cursive",
                            "fontWeight": "700",
                            "fontStyle": "normal",
                            "fontStretch": "normal",
                            "src": [ "file:./assets/fonts/balooda2/balooda2-bold.ttf" ]
                        }
                    ]
				},
                {
                    "fontFamily": "'Saira', sans-serif",
                    "name": "Port Categ - Saira",
                    "slug": "saira",
                    "fontFace": [
                        {
                            "fontFamily": "'Saira', sans-serif",
                            "fontWeight": "500",
                            "fontStyle": "normal",
                            "fontStretch": "normal",
                            "src": [ "file:./assets/fonts/saira/saira-medium.ttf" ]
                        }
                    ]
                },

    What am I doing wrong?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Robert Anderson

    (@noisysocks)

    3 years, 7 months ago

    Hi @hikatamika! The code sample you provided looks correct to me. Let’s try to narrow down the problem with some general debugging techniques.

    1) Have you double checked that the .ttf files are located in the right place?

    
wp-content/
    themes/
        my-theme/
            theme.json
            assets/
                fonts/
                    balooda2/
                        balooda2-bold.ttf
                    saira/
                        saira-medium.ttf

    2) Is your web server correctly serving the .ttf file when you browse to http://my-website.test/wp-content/themes/my-theme/assets/fonts/balooda2/balooda2-bold.ttf in your web browser? (Be sure to replace my-website.test and my-theme with the correct values.)

    3) When you browse to your website and view Page Source, do you see inline <style> tags containing @font-face { } declarations for each of the font families in your theme.json?

    Thread Starter hikatamika

    (@hikatamika)

    3 years, 7 months ago

    Hi @noisysocks!

    I’ve double-checked the location of my font files, and putting the URL of where my font files are located downloads them back to me, but I’m unsure how to view the CSS that my theme.json generates.

    Robert Anderson

    (@noisysocks)

    3 years, 7 months ago

    Hi @hikatamika. You can open the front page of your website in your browser and view the page source. In amongst the HTML code you see, there should be a @font-face balooda2 declaration.

    https://www.wikihow.com/View-Source-Code

    Thread Starter hikatamika

    (@hikatamika)

    3 years, 7 months ago

    @noisysocks I don’t see any @font-face declarations.
    I’m also noticing that, though at one point, the FSE recognized the theme colors I declared in my theme.json, now it doesn’t.

    I thought that by exporting the theme in the FSE, I could see what WP is looking at. The theme.json in the export only has:

    {
	"$schema": "https://schemas.wp.org/wp/6.0/theme.json",
	"version": 2
}

    …even though my copy has a lot of declarations in it. 😵‍💫

    I’m worried it means I went wrong in the syntax somewhere and now WordPress can’t read any of it?

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Gutenberg theme.json showing fallback fonts.’ is closed to new replies.