Using external font sources in theme.json

  • andrewinsideout

    (@andrewinsideout)


    1 year, 8 months ago

    For some reason fonts registered in theme.json don’t support externally hosted files such as google, bunny, etc.

    I spent ages searching around trying to find a solution to this and I haven’t so does anyone have a definitive answer for this?

Viewing 1 replies (of 1 total)
  • ravindra107

    (@ravindra107)

    1 year, 5 months ago

    Hey @andrewinsideout,
    1. External font enqueue.

    function custo_external_fonts() {
        wp_enqueue_style(
            'google-fonts',
            'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap',
            array(),
            null
        );
    }
    add_action('wp_enqueue_scripts', 'custo_external_fonts');

    2. Add to the theme.json

    {
      "settings": {
        "typography": {
          "fontFamilies": [
            {
              "fontFamily": "'Roboto', sans-serif",
              "name": "Roboto",
              "slug": "roboto",
              "fontFace": [
                {
                  "fontFamily": "Roboto",
                  "fontWeight": "400",
                  "src": "url(../assets/fonts/roboto-regular.woff2) format('woff2')"
                },
                {
                  "fontFamily": "Roboto",
                  "fontWeight": "700",
                  "src": "url(../assets/fonts/roboto-bold.woff2) format('woff2')"
                }
              ]
            }
          ]
        }
      }
    }

    3. After then call on .css file.

    body {
        font-family: var(--wp--preset--font-family--roboto);
    }

    I hope above methods work for you.

    Best Regards
    Ravindra Singh Meyda

    • This reply was modified 1 year, 5 months ago by ravindra107.
Viewing 1 replies (of 1 total)

The topic ‘Using external font sources in theme.json’ is closed to new replies.