Skip to content

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