WebFont Importer

A (svelte) component for using fonts from google fonts or bunny fonts (GDPR-compatible).

View Demo · Documentation · Report Bug · Request Feature

📔 Table of Contents

• About the Project
  • Tech Stack
  • Features
  • Color Reference
  • Environment Variables
• Getting Started
  • Prerequisites
  • Installation
  • Run Locally
• Usage
• Roadmap
• Contributing
  • Code of Conduct
• License
• Contact
• Acknowledgements

🌟 About the Project

👾 Tech Stack

Library

• Typescript
• Svelte

Demo App

• TailwindCSS
• Typescript

🎯 Features

• Import any font from Google Fonts
• Use bunny fonts API for GDPR compliance
• Import any variant

🧰 Getting Started

⚙️ Installation

Install webfont-importer with pnpm

  pnpm add webfont-importer

Install webfont-importer with npm

  npm install webfont-importer

Install webfont-importer with yarn

  pnpm add webfont-importer

👀 Usage

Webfont-importer is designed to be super easy to use and a convenient method to switch from google fonts to the more GDPR-friendly bunny fonts.

It is recommended to use this in the svelte:head special element. This library has types, so feel free to use those if you wish.

NOTE: There is no validation on the fonts yet, neither typescript nor runtime. I may add that in the future depending on how many users there are.

<script lang="ts">
  import type { Font, WebfontImporterSource } from 'webfont-importer';
  import WebfontImporter from 'webfont-importer';

  let fontSource: WebfontImporterSource = 'bunny';

  let fonts: Font[] = [
    {
      family: 'Roboto'
    },
    {
      family: 'Playball',
      variants:[{
        variant: '400', 
      },
      {
        variant: '400',
        italics: true 
      }]
    }
  ];
</script>

<svelte:head>
	<WebfontImporter source={fontSource} fonts/>
</svelte:head>

<p>Rest of component goes here.</p>

🧭 Roadmap

• [X] Add working version for use in sveltemeacoffee
• [ ] Add typescript validation for fonts.
• [ ] Add runtime validation for fonts. (maybe print errors/warnings to console)

👋 Contributing

Contributions are always welcome!

See CONTRIBUTING.md for ways to get started.

📜 Code of Conduct

Please read the Code of Conduct

⚠️ License

Distributed under the MIT License. See LICENSE.txt for more information.

🤝 Contact

Samuel C Tyler - @skamansam - [e-mail]

Project Link: https://github.com/skamansam/webfont-importer

💎 Acknowledgements

Use this section to mention useful resources and libraries that you have used in your projects.

• Shields.io
• Awesome README
• Emoji Cheat Sheet
• Readme Template