Skip to content
SuperWeb Barebones

Custom fonts

There are several different ways to use custom fonts with SuperWeb Barebones.

Using Google Fonts

Use Google’s servers to serve your fonts.

  1. Select a font from Google Fonts This example will use Inter.

  2. Click “Get Font” and then “Get embed code”.

  3. Embed the link tags in BaseHead.astro.

    src/components/BaseHead.astro
    <head>
      <!-- ... -->
    

      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
      <link
        href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
        rel="stylesheet"
      />
    

      <slot />
    </head>

  4. Embed the CSS in global.css. For variable fonts, enter a weight between 100 and 900 for font-weight. For static fonts, you may need to add multiple classes with unique names for each font weight.

    src/styles/global.css
    .inter-variable {
      font-family: "Inter", sans-serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
    }

  5. Use the class inter-variable to style your website.

    <div class="inter-variable">
      <p>This will be Inter with a normal font weight.</p>
      <p class="font-bold">This will be Inter with a bold font weight.</p>
    </div>

Using Fontsource

Fontsource uses npm modules to install open source fonts.

  1. Select a font from Fontsource. This example will use Inter.

  2. Install the package for your font.

    Terminal window
    npm install @fontsource-variable/inter

  3. Import the font package in BaseLayout.astro.

    src/layouts/BaseLayout.astro
    ---
    // Supports weights 100-900
    import "@fontsource-variable/inter";
    ---

  4. Add the font name to the body in global.css.

    src/styles/global.css
    body {
        font-family: "Inter Variable", monospace;
    }

  5. Register the font in tailwind.config.mjs.

    tailwind.config.mjs
    import defaultTheme from "tailwindcss/defaultTheme";
    

    export default {
      content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
      theme: {
        extend: {
          fontFamily: {
            sans: ["Inter Variable", ...defaultTheme.fontFamily.sans],
          },
        },
      },
      plugins: [],
    };

  6. The class font-sans now uses the Inter font family.

    <div class="font-sans">
      <p>This will be Inter with a normal font weight.</p>
      <p class="font-bold">This will be Inter with a bold font weight.</p>
    </div>

Using local fonts

  1. This example will use Inter 4.0.

  2. Copy InterVariable.woff2 to public/fonts.

  3. Add the following font-face rule to global.css.

    src/styles/global.css
    @font-face {
      font-family: "Inter Variable";
      src: url("/fonts/InterVariable.woff2") format("woff2");
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

  4. Register the font in tailwind.config.mjs.

    tailwind.config.mjs
    import defaultTheme from "tailwindcss/defaultTheme";
    

    export default {
      content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
      theme: {
        extend: {
          fontFamily: {
            sans: ["Inter Variable", ...defaultTheme.fontFamily.sans],
          },
        },
      },
      plugins: [],
    };

  5. The class font-sans now uses the Inter font family.

    <div class="font-sans">
      <p>This will be Inter with a normal font weight.</p>
      <p class="font-bold">This will be Inter with a bold font weight.</p>
    </div>

Further reading