npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fontcache

v1.0.2

Published

A tool to download and manage Google Fonts locally.

Downloads

7

Readme

FontCache

FontCache is a modern tool that downloads and manages Google Fonts locally, allowing you to use them in your projects without relying on third-party API calls. Ideal for environments with restricted internet access or for those aiming to improve performance and privacy.

Features

  • Download and manage Google Fonts locally
  • Customize which fonts and weights to download
  • Seamlessly integrate with popular build tools
  • Optimize font loading for performance
  • Ensure fonts are accessible and compatible across devices

Benefits

1. Offline Availability

With FontCache, you can use Google Fonts in environments with restricted internet access or offline mode, ensuring that your project’s typography is always available.

2. Improved Performance

By hosting fonts locally, you reduce the need for external HTTP requests, leading to faster load times and better performance, especially in resource-constrained environments.

3. Increased Privacy

FontCache eliminates the need for external API calls to Google Fonts, which can enhance user privacy and comply with data protection regulations by preventing user data from being shared with third parties.

4. Customization

Easily configure which fonts and weights to download, tailored to your project's specific needs, reducing unnecessary bloat and ensuring optimal performance.

5. Consistency

Ensure consistent font availability across different environments and deployment scenarios, removing dependency on external resources that might change or become unavailable.

Installation

Install FontCache as a development dependency in your project:

npm install --save-dev fontcache

Configuration

Create a fonts.config.json file in the root directory of your project to specify which fonts and weights you need:

{
  "fonts": [
    {
      "family": "OpenSans",
      "weights": ["400", "700"]
    },
    {
      "family": "Roboto",
      "weights": ["400", "700"]
    }
  ]
}

Usage

Automatically Download Fonts

Add a script to your project's package.json to run the font downloader after dependencies are installed:

{
  "scripts": {
    "postinstall": "download-fonts"
  }
}

This script will download the specified fonts and place them in the public/Fonts directory.

Automatically Generate CSS File

FontCache also generates a {fontName}.css file with @font-face declarations for each downloaded font. This file will be placed in the same directory where the fonts are downloaded, making it easy to include in your project. This is an example of Roboto.css file that is generated inside /public/Fonts/Roboto.

@font-face {
  font-family: 'Roboto';
  src: url('/public/Fonts/Roboto/Roboto-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('/public/Fonts/Roboto/Roboto-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

Now you just need to include preloader inside index.html file or directly use inside your css file

This is an example of Roboto font that is included as preloader inside /public/index.html.

<link rel="stylesheet" href="%PUBLIC_URL%/Fonts/Roboto/Roboto.css" />
h1 {
  font-family: "Roboto";
  font-weight: 700;
}

p {
  font-family: "Roboto";
  font-weight: 400;
}
import React from 'react';
import './App.css'; // Ensure this CSS file contains your @font-face definitions

const App = () => {
  return (
    <div style={{ fontFamily: 'Roboto' }}>
      <h1>Hello, world!</h1>
      <p>This is a paragraph with dynamic fonts!</p>
    </div>
  );
};

export default App;

Advanced Usage

Customizing Font Download Directory

By default, FontCache downloads fonts to the public/Fonts directory. You can customize this by specifying a different directory in your fonts.config.json file:

{
  "fonts": [
    {
      "family": "OpenSans",
      "weights": ["400", "700"]
    },
    {
      "family": "Roboto",
      "weights": ["400", "700"]
    }
  ],
  "outputDir": "static/fonts"
}

Screenshot of public folder

Screenshot of public folder showcasing folder structure

Test Coverage

File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s -----------------|---------|----------|---------|---------|------------------- All files | 93.33 | 62.5 | 66.66 | 93.33 |
downloadFonts.js | 93.33 | 62.5 | 66.66 | 93.33 | 47-48

Contributing

We welcome contributions to FontCache! If you have ideas for improvements or find bugs, please open an issue or submit a pull request on GitHub.

License

FontCache is licensed under the MIT License. See the LICENSE file for more information.