Custom font

Fontsource

Head.astro

---
import "@fontsource/poppins/100.css";
import "@fontsource/poppins/200.css";
import "@fontsource/poppins/300.css";
import "@fontsource/poppins/400.css";
import "@fontsource/poppins/500.css";
import "@fontsource/poppins/600.css";
import "@fontsource/poppins/700.css";
import "@fontsource/poppins/800.css";
import "@fontsource/poppins/900.css";

import "@fontsource/poppins/100-italic.css";
import "@fontsource/poppins/200-italic.css";
import "@fontsource/poppins/300-italic.css";
import "@fontsource/poppins/400-italic.css";
import "@fontsource/poppins/500-italic.css";
import "@fontsource/poppins/600-italic.css";
import "@fontsource/poppins/700-italic.css";
import "@fontsource/poppins/800-italic.css";
import "@fontsource/poppins/900-italic.css";

theme.json

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "\"Poppins\", sans-serif",
          "name": "Poppins",
          "slug": "poppins",
          "fontFace": [
            {
              "fontFamily": "Poppins",
              "fontStyle": "normal",
              "fontWeight": "400",
              "src": [
                "url(./assets/fonts/Poppins-Regular.woff2)"
              ]
            },
            {
              "fontFamily": "Poppins",
              "fontStyle": "normal",
              "fontWeight": "700",
              "src": [
                "url(./assets/fonts/Poppins-Bold.woff2)"
              ]
            },
            {
              "fontFamily": "Poppins",
              "fontStyle": "italic",
              "fontWeight": "400",
              "src": [
                "url(./assets/fonts/Poppins-Italic.woff2)"
              ]
            },
            {
              "fontFamily": "Poppins",
              "fontStyle": "italic",
              "fontWeight": "700",
              "src": [
                "url(./assets/fonts/Poppins-BoldItalic.woff2)"
              ]
            }
          ]
        }
      ]
    },
    "layout": {
      "contentSize": "800px",
      "wideSize": "1100px"
    },
    "color": {
      "palette": [
        {
          "color": "#ffffff",
          "name": "Starlight",
          "slug": "starlight"
        },
        {
          "color": "#000000",
          "name": "Black hole",
          "slug": "black-hole"
        },
        {
          "color": "#0c0720",
          "name": "Event horizon",
          "slug": "event-horizon"
        },
        {
          "color": "#ff7e33",
          "name": "Blast off",
          "slug": "blast-off"
        }
      ]
    }
  },
  "styles": {
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--poppins)"
    }
  }
}