Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/svelte-web-fonts/google
Wrapper for the Google Fonts API with autocompletion for font names and all API options
https://github.com/svelte-web-fonts/google
fonts googlefonts svelte
Last synced: 24 days ago
JSON representation
Wrapper for the Google Fonts API with autocompletion for font names and all API options
- Host: GitHub
- URL: https://github.com/svelte-web-fonts/google
- Owner: svelte-web-fonts
- License: mit
- Archived: true
- Created: 2021-08-12T20:31:52.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-06-19T12:42:09.000Z (over 2 years ago)
- Last Synced: 2024-11-11T21:42:52.761Z (about 1 month ago)
- Topics: fonts, googlefonts, svelte
- Language: TypeScript
- Homepage:
- Size: 724 KB
- Stars: 16
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-svelte - svelte-web-fonts/google - Tiny component for easily loading Fonts via the Google Fonts API including autocompletion. (Utilities / Fonts)
README
# @svelte-web-fonts/google
Easily include Google Fonts in your svelte project.
## 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 `` to add the stylesheet to the head of your HTML.
## Usage
```html
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"
],
},
];
{#each fonts as font}
{#each font.variants as variant}
{font.family}
{/each}
{/each}
```
# 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)