@svelte-web-fonts/google

Easily include Google Fonts in your svelte project.

The better alternatives :*(

• Fountsource reduces all the abstractions of this library to a single import statement
• When using UnoCSS you can use @unocss/preset-web-fonts

Installation

npm install @svelte-web-fonts/google

or

yarn add @svelte-web-fonts/google

Usage

Use the "GoogleFont" component to create a stylesheet to include Google Fonts.

Note: Use <svelte:head> to add the stylesheet to the head of your HTML.

Usage

<script lang="ts">
import GoogleFont, { getFontStyle } from "@svelte-web-fonts/google";
import type { GoogleFontDefinition, GoogleFontVariant } from "@svelte-web-fonts/google";

const fonts: GoogleFontDefinition[] = [
    {
        family: "Style Script",
        variants: [
            "200"
        ],
    },
    {
        family: "Roboto",
        variants: [
            "100",
            "400italic"
        ],
    },
];
</script>

<svelte:head>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <GoogleFont fonts="{fonts}" display="swap" />
</svelte:head>

<!-- Used for illustration purposes -->

<h1>
    {#each fonts as font}
        {#each font.variants as variant}
            <p style={getFontStyle(font.family, variant)}>
                {font.family}
            </p>
        {/each}
    {/each}
</h1>

Troubleshooting

Make sure to check the network tab if a font is not loading. Most of the time you specified a font variant that is not available.

Font Options

All array options (ending with []) also accept a single value.

display

font-display lets you control what happens while the font is unavailable. Specifying a value other than the default auto is usually appropriate.

Available options

"auto" | "block" | "swap" | "fallback" | "optional"

subsets[]

Some of the fonts in the Google Font Directory support multiple subsets (like Latin, Cyrillic, and Greek for example). Look for the available subsets for your font family on Google Fonts.

More information

text

Oftentimes, when you want to use a web font on your website or application, you know in advance which letters you'll need. This often occurs when you're using a web font in a logo or heading.

In these cases, you should consider specifying a text value

More information

effects[]

When making headers or display texts on your website, you'll often want to stylize your text in a decorative way. To simplify your work, Google has provided a collection of font effects that you can use with minimal effort to produce beautiful display text

The text you apply the font to, needs a specific class, for the effect to work. The format is .font-effect-NAME, where NAME is the name of the effect.

More information