Importing Google Fonts in Block Themes — Correct Way

@import url("+Sans");
@import url(":100,100i,300,300i,400,400i,700,700i,900,900i");
@import url("+Sans:wght@200;300;400;600;700;800;900&display=swap");

This is an snipped form layout.css which I have commented now as I wanted that the block theme should import such fomts form theme.json. Below is my theme.json —

{
    "$schema": ".json",
    "version": 3,
    "settings": {
        "layout": {
            "contentSize": "700px",
            "wideSize": "1200px"
        },
        "typography": {
            "fontFamilies": [
                {
                    "name": "PT Sans",
                    "slug": "pt-sans",
                    "fontFamily": "\"PT Sans\", sans-serif",
                    "fontFace": [
                        {
                            "fontFamily": "PT Sans",
                            "fontStyle": "normal",
                            "fontWeight": "400",
                            "src": ["+Sans"]
                        }
                    ]
                },
                {
                    "name": "Lato",
                    "slug": "lato",
                    "fontFamily": "\"Lato\", sans-serif",
                    "fontFace": [
                        {
                            "fontFamily": "Lato",
                            "fontStyle": "normal",
                            "fontWeight": "100 900",
                            "src": [":100,100i,300,300i,400,400i,700,700i,900,900i"]
                        }
                    ]
                },
                {
                    "name": "Martel Sans",
                    "slug": "martel-sans",
                    "fontFamily": "\"Martel Sans\", sans-serif",
                    "fontFace": [
                        {
                            "fontFamily": "Martel Sans",
                            "fontStyle": "normal",
                            "fontWeight": "200 300 400 600 700 800 900",
                            "src": ["+Sans:wght@200;300;400;600;700;800;900&display=swap"]
                        }
                    ]
                }
            ]
        }
    },
    "styles": {
        "typography": {
            "fontFamily": "var(--wp--preset--font-family--martel-sans)"
        }
    },
    "templateParts": [
        {
            "name": "sidebar",
            "title": "Sidebar",
            "area": "sidebar"
        }
    ]
}

But the fonts are not importing now.

@import url("https://fonts.googleapis/css?family=PT+Sans");
@import url("https://fonts.googleapis/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i");
@import url("https://fonts.googleapis/css2?family=Martel+Sans:wght@200;300;400;600;700;800;900&display=swap");

This is an snipped form layout.css which I have commented now as I wanted that the block theme should import such fomts form theme.json. Below is my theme.json —

{
    "$schema": "https://schemas.wp/trunk/theme.json",
    "version": 3,
    "settings": {
        "layout": {
            "contentSize": "700px",
            "wideSize": "1200px"
        },
        "typography": {
            "fontFamilies": [
                {
                    "name": "PT Sans",
                    "slug": "pt-sans",
                    "fontFamily": "\"PT Sans\", sans-serif",
                    "fontFace": [
                        {
                            "fontFamily": "PT Sans",
                            "fontStyle": "normal",
                            "fontWeight": "400",
                            "src": ["https://fonts.googleapis/css?family=PT+Sans"]
                        }
                    ]
                },
                {
                    "name": "Lato",
                    "slug": "lato",
                    "fontFamily": "\"Lato\", sans-serif",
                    "fontFace": [
                        {
                            "fontFamily": "Lato",
                            "fontStyle": "normal",
                            "fontWeight": "100 900",
                            "src": ["https://fonts.googleapis/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i"]
                        }
                    ]
                },
                {
                    "name": "Martel Sans",
                    "slug": "martel-sans",
                    "fontFamily": "\"Martel Sans\", sans-serif",
                    "fontFace": [
                        {
                            "fontFamily": "Martel Sans",
                            "fontStyle": "normal",
                            "fontWeight": "200 300 400 600 700 800 900",
                            "src": ["https://fonts.googleapis/css2?family=Martel+Sans:wght@200;300;400;600;700;800;900&display=swap"]
                        }
                    ]
                }
            ]
        }
    },
    "styles": {
        "typography": {
            "fontFamily": "var(--wp--preset--font-family--martel-sans)"
        }
    },
    "templateParts": [
        {
            "name": "sidebar",
            "title": "Sidebar",
            "area": "sidebar"
        }
    ]
}

But the fonts are not importing now.

• block-editor
• block-themes

Share Improve this question asked Apr 27 at 3:39 WordCentWordCent 1,96466 gold badges3434 silver badges6060 bronze badges 1

• What does the console say? Any 404 errors under the hood while fetching the fonts? – user3135691 Commented Apr 27 at 22:48

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

Make sure the layout.css file is called correctly, both on the frontend and backend.

No need to add fontFace, you have called it via @import :

{
    "$schema": "https://schemas.wp/trunk/theme.json",
    "version": 3,
    "settings": {
        "layout": {
            "contentSize": "700px",
            "wideSize": "1200px"
        },
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "\"PT Sans\", sans-serif",
                    "name": "PT Sans",
                    "slug": "pt-sans"
                },
                {

                    "fontFamily": "\"Lato\", sans-serif",
                    "name": "Lato",
                    "slug": "lato"
                },
                {
                    "fontFamily": "\"Martel Sans\", sans-serif",
                    "name": "Martel Sans",
                    "slug": "martel-sans"
                }
            ]
        }
    },
    "styles": {
        "typography": {
            "fontFamily": "var(--wp--preset--font-family--martel-sans)"
        }
    },
    "templateParts": [
        {
            "name": "sidebar",
            "title": "Sidebar",
            "area": "sidebar"
        }
    ]
}

If you mean the font does not appear in the font selection dropdown, it means you need to Reset Style in the block editor in the section: Style >> Typography

---

Update :

The way to import fonts directly via CSS with @import from Google Fonts or other URLs is not the best way for modern WordPress themes, especially for Full Site Editing (FSE).

There are two ways to add fonts to the Theme:

1. Place the Font File in the Theme directory, then call it via theme.json with fontFace :

for example adding the same font but different style

your-theme/assets/fonts/nunito/Nunito-VariableFont_wght.woff2

and

your-theme/assets/fonts/nunito/Nunito-Italic-VariableFont_wght.woff2

And call it via theme.json , because the Nunito font has variations of 200 - 1000, so here input the fontWeight according to the font variation, or just what is needed.

{
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFace": [
            {
              "fontFamily": "Nunito",
              "fontStyle": "normal",
              "fontWeight": "200 1000",
              "src": [
                "file:./assets/fonts/nunito/Nunito-VariableFont_wght.woff2"
              ]
            },
            {
              "fontFamily": "Nunito",
              "fontStyle": "italic",
              "fontWeight": "200 1000",
              "src": [
                "file:./assets/fonts/nunito/Nunito-Italic-VariableFont_wght.woff2"
              ]
            }
          ],
          "fontFamily": "\"Nunito\", sans-serif",
          "name": "Nunito",
          "slug": "nunito"
        }
      ]
    }
  }
}

2. Using custom functions in PHP

source : webfont-loader