npm package: @svelte-web-fonts/google
Description: Load fonts via google with typescript auto-completion
Author: Jakob Kruse
Latest version: 1.0.4

# @svelte-web-fonts/google

<p align="center">
    <img src="https://raw.githubusercontent.com/SvelteWebFonts/google/main/assets/Project-Logo.png" width="128"/>
    <h1 align="center">Easily include Google Fonts in your svelte project.</h1>
</p>

![workflow](https://github.com/SvelteWebFonts/google/actions/workflows/node.js.yml/badge.svg)

## The better alternatives :*(

- [Fountsource](https://fontsource.org/) reduces all the abstractions of this library to a single import statement
- When using [UnoCSS](https://github.com/antfu/unocss) you can use [@unocss/preset-web-fonts](https://github.com/antfu/unocss/tree/main/packages/preset-web-fonts)

## Installation

```bash
npm install @svelte-web-fonts/google
```

or

```bash
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

```html
<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](https://developers.google.com/fonts/docs/getting_started#use_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](https://developers.google.com/fonts/docs/getting_started#specifying_script_subsets)

### **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](https://developers.google.com/fonts/docs/getting_started#optimizing_your_font_requests)

### **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](https://developers.google.com/fonts/docs/getting_started#enabling_font_effects_beta)